Bug 201854 – transform presentation attribute seems to ignore transform-origin

• Component: SVG
• Status: RESOLVED WORKSFORME

[Dirk Schulze]

The transform presentation attribute on SVG elements seems to ignore the transform-origin property.

Here an example of transform attribute and transform-origin:
https://codepen.io/krit/pen/KKPxagO

Here an example of transform property and transform-origin:
https://codepen.io/krit/pen/eYOLgBp


The second one does not show any red and works correctly. The first one seems to ignore the settings of transform-origin.

I think that this is a regression and did work before. However, I can not confirm it right now.

[Radar WebKit Bug Importer]

<rdar://problem/55450497>

[Maxim Kulikov]

I can confirm that the bug is reproduced in Safari versions 14.0.3, 13.1.2 and 12.1.2. I didn't test it on earlier versions.

It seems like transform-origin SVG attribute is applied only to transformations defined in transform CSS property, but not in transform SVG attribute.

For example, this is rendered incorrectly
<g transform="scale(0.75 0.75)" transform-origin="100 100">...</g>
while this is rendered correctly
<g style="transform: scale(0.75, 0.75);" transform-origin="100 100">...</g>

Here is a more demonstrative example of the bug: https://maxlk.github.io/svg-transform-origin-attribute/

[Maxim Kulikov]

Created attachment 426406 [details]
examples of usages of SVG transform-origin attribute

All images on the page should look the same as the image from Figure 1.

Currently, images from sections 2 and 4 are rendered incorrectly.

[Martin Robinson]

All images look the same to me now, so I think this problem has been fixed.

Created attachment 448972 [details]
Reference Image for transform-origin

Figure 3. should look exactly the same as the reference image in Figure 2.

It does not look like the reference image in Figure 2.

This issue does not appear to be fixed as the previous commenter suggests. Please let me know if I can do anything else to help.

[Martin Robinson]

(In reply to attley from comment #5)
> Created attachment 448972 [details]
> Reference Image for transform-origin
> 
> Figure 3. should look exactly the same as the reference image in Figure 2.
> 
> It does not look like the reference image in Figure 2.

What test case is this screenshot of? It looks different to me than the one listed above in the attachments. Additionally, what version of Safari are you testing with?

Hi Martin,
I'm using Safari 15.1. The attachment that I added is a screenshot of my Safari browser (v15.1) rendering this page:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin

Specifically the HTML Example section:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin#example

Unless I'm reading the docs on that page incorrectly - it says that 'Figure 3. transform-origin used. This image should look exactly the same as the reference image in Figure 2.' As you can see from my attached screenshot it does not look like the reference image in Figure 2. So something is not working.

The original attachment from Maxim is a screenshot of a demo that it looks like they created, which can be found here:
https://maxlk.github.io/svg-transform-origin-attribute/

Thanks!

[Simon Fraser (smfr)]

Please try STP 137. With that, https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin shows correct rendering.

(In reply to Simon Fraser (smfr) from comment #9)
> Please try STP 137. With that,
> https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin
> shows correct rendering.

Hi Simon,
What do you mean by STP 137?
Thx.

[Martin Robinson]

(In reply to attley from comment #10)
> What do you mean by STP 137?

STP is the Safari Technology Preview which can be downloaded from Apple's site: https://developer.apple.com/safari/technology-preview/