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.
<rdar://problem/55450497>
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/
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.
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.
(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!
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.
(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/