为什么Webkit / Safari（iOS，macOS）与Blink和Gecko相比，以不同的顺序渲染我的SVG转换？

Question

我有一个带有星号图标的最小SVG图像：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
        <style>
        .a {
            fill: red;
            transform-box: fill-box;
            transform-origin: center;
        }
        </style>
    </defs>
    <!-- x = 45 because it's 10px wide and centered around x=50, so x0 == 45, x1 == 55 -->
    <rect class="a" x="45" y="0" width="10" height="100"/>
    <rect class="a" x="45" y="0" width="10" height="100" transform="rotate(-45)"/>
    <rect class="a" x="45" y="0" width="10" height="100" transform="rotate( 45)"/>
    <rect class="a" x="45" y="0" width="10" height="100" transform="rotate(-90)"/>
</svg>

[这可以在Firefox 75和Chrome 80中正确显示，但在iOS或macOS上不能正确显示：

Firefox 75：

Chrome 80：

iOS 13上的Safari

但是在Safari中，与每个transform-origin元素上的transform=""属性相比，<rect>似乎被忽略或乱序应用：

有人告诉我它在macOS Safari上渲染了相同的损坏的图像（我现在无法立即访问macOS Safari，所以我不能从那里发布屏幕截图，对不起。）

[我已经在Google周围进行搜索，以了解Safari / WebKit是否缺乏对transform-box，transform-box或transform-origin的支持，但据我所知，它们已经得到Safari的完全支持多年-所以我不明白为什么它会无序地应用转换并导致渲染中断。

Answer 1

[在Safari中摆弄SVG之后，Safari的Web检查器does似乎可以识别transform-origin SVG样式属性，但是在应用转换时它实际上并没有使用它，这很奇怪（例如，使用transform="rotate(deg)"或transform="rotate(deg)"或transform-origin无效）-因此解决方法是使用其他方法更改旋转中心。

使用transform-origin: center;步骤

一种方法是添加transform-origin: 0px 0px步骤，使旋转中心在画布上居中，然后执行旋转，然后撤消transform-origin: 50px 50px步骤：

translate

例如：

translate

更好的方法：使用translate：

不是将初始transform="translate( 50, 50 ) rotate(45) translate( -50, -50 )" 步骤应用于

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
    <rect fill="red"    x="45" y="0" width="10" height="100" />
    <rect fill="blue"   x="45" y="0" width="10" height="100" transform="translate(50,50) rotate(-45) translate(-50,-50)" />
    <rect fill="green"  x="45" y="0" width="10" height="100" transform="translate(50,50) rotate( 45) translate(-50,-50)" />
    <rect fill="orange" x="45" y="0" width="10" height="100" transform="translate(50,50) rotate(-90) translate(-50,-50)" />
</svg>

链，而是rotate( angle, x, y )支持使用其他参数来指定旋转中心-因此，它适用于Safari，Chrome（+ Edge + Opera）和Firefox：

translate

但这也有效：