Bug 171027

Summary: Root SVG in CSS should transform around 50% 50%
Product: WebKit Reporter: Dean Jackson <dino>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: krit, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
bad test none

Description Dean Jackson 2017-04-19 18:28:33 PDT
data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="200"%20height="200"%20style="border:%205px%20solid%20red"><rect%20x="50"%20y="50"%20width="100"%20height="100"/></svg>

shows that the root SVG can be treated as a CSS box

however, if you put a transform on:

data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="200"%20height="200"%20style="transform:rotate(45deg);%20border:%205px%20solid%20red"><rect%20x="50"%20y="50"%20width="100"%20height="100"/></svg>

You'll see it is being rotated with the SVG value of transform origin.

The same occurs for embedded SVGs. Other browsers do this with a 50% 50% transform origin.
Comment 1 Dean Jackson 2017-04-19 18:32:36 PDT
Loading a standalone SVG file works ok though, confusingly.
Comment 2 Dean Jackson 2017-04-19 18:32:57 PDT
Created attachment 307538 [details]
bad test
Comment 3 Radar WebKit Bug Importer 2017-04-19 18:33:31 PDT
<rdar://problem/31722981>
Comment 4 Dirk Schulze 2018-07-21 02:19:25 PDT
Dean: The example looks the same in Firefox. Can this get closed?