[英]Firefox SVG transform-origin still not fixed?
我在Firefox文檔中讀到,SVG轉換源已在Firefox 41+的Firefox中修復,但我使用的是Firefox 49,並且有一些奇怪的效果。
這是我在Chrome中的SVG動畫:
..在Firefox中:
我的代碼如下:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.59 674.02">
...
<path class="fillCup" d="M395.56,528.9l6.53,36.05c0,2.42,6.08,4.38,13.57,4.38s13.57-2,13.57-4.38l6.53-36.05s-0.68,4.5-20.11,4.5S395.56,528.9,395.56,528.9Z" transform="translate(-17.93 -12.21)"/>
<polygon class="sparkle" points="407.41 538.79 407.47 530.6 403.98 528.96 407.82 528.62 410.59 520.9 410.53 529.1 413.81 530.7 410.18 531.08 407.41 538.79"/>
</svg>
和CSS:
.sparkle {
fill: #fff;
transform-origin: 50% 50%;
animation: pulse 1s linear 0s infinite alternate forwards;
}
.fillCup {
fill: #4fc3f7;
transform: scale(0, 0) translate(-17.93px, -12.21px);
transform-origin: 10% 70%;
}
動畫pulse
在哪里
@keyframes pulse {
0% {
transform: scale(.7, .7);
}
100% {
transform: scale(1, 1);
}
}
並使用javascript將.fillCup
多邊形設置為scale(1, 1)
動畫。
( 注意:我實際上是在使用sass mixin,但是為了簡化代碼而省略了它們。firefox選擇在moz-transform
或-webkit-transform
上使用transform
,因此這是我包括的唯一“前綴”這里。)
我應該采用一種“正確的”方式進行transform-origin
以便它在所有瀏覽器上都能工作嗎? Chrome是做錯了那件事的人嗎? 當我在Firefox中切換百分比時,它使用的實際位置似乎完全是任意的。
Firefox實際上是正確遵循規范的一種。 Chrome是不正確的。 它盡早實現了transform-origin
並且百分比值的行為與規范中最終確定的行為不同。
最簡單的解決方案是不使用百分比值。 使用絕對坐標。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.