CSS transform doesn't work for SVG-in-OpenType glyphs




3 years ago
23 days ago


(Reporter: roel, Unassigned)


48 Branch
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)




(2 attachments)



3 years ago
Posted image 0042.svg
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 OPR/39.0.2256.48

Steps to reproduce:

OpenType SVG font with glyph that uses CSS transform is rendered without the transform.

1. Go to https://pixelambacht.nl/lapislegit/
2. Look at the letter B (0042)
3. Normal SVG (iframe, inlined, img-tag) are rotated, glyph isn't

Actual results:

The SVG glyph ignores the rotation set with a CSS transform.

Expected results:

The SVG glyph should have rotated the same as the original SVG document.


3 years ago
OS: Unspecified → Mac OS X
Hardware: Unspecified → x86
I can reproduce this in nightly or at least confirm that the glyph does not rotate while other versions of the same SVG do:

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20160825030226

Screenshot is attached.  Presumably this goes to Core, SVG.
Build ID 	20160828030602
User Agent 	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:51.0) Gecko/20100101 Firefox/51.0
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:51.0) Gecko/20100101 Firefox/51.0

Hi Roel,

I have tested this issue on the latest Firefox release (48.0.2) and the latest Nightly (51.0a1) and indeed the issue is reproducible. Windows 10 seems to have the same issue as Mac and Linux.
Component: Untriaged → SVG
Ever confirmed: true
OS: Mac OS X → All
Product: Firefox → Core
Hardware: x86 → x86_64
Priority: -- → P3
It's reproducible on all platforms, including 32bits versions.
Hardware: x86_64 → All
See Also: → 1297672
Blocks: 719286


23 days ago
Depends on: 1547209

Comment 4

23 days ago

The CSS transform issue will be almost solved after landing patch in Bug 1547209.

However, there is still a problem in the glyph part: The viewbox on the outer <svg> isn't really a viewbox in the generated SVG, it's merely emulated by a <g> with proper scaling. As a consequence, the percentage in transform-origin will be resolved against the original size 1000 rather than the emulated viewbox.

You need to log in before you can comment on or make changes to this bug.