我在使轉換原點在Firefox（v.18 +，未測試的其他版本）中工作時遇到問題。Webkit瀏覽器可以正常工作。我正在嘗試將原點設置為組的中心，但是到目前為止我沒有嘗試過。這是代碼：<!DOCTYPE html><html> <head> <title>TEST</title> <style> #test{ -webkit-transform-origin: 50% 50%; transform-origin: center center; -webkit-animation: prop 2s infinite; animation: prop 2s infinite; } @-webkit-keyframes prop { 0% { -webkit-transform: scale(1,1);} 20% { -webkit-transform: scale(1,.8);} 40% { -webkit-transform: scale(1,.6);} 50% { -webkit-transform: scale(1,.4);} 60% { -webkit-transform: scale(1,.2);} 70% { -webkit-transform: scale(1,.4);} 80% { -webkit-transform: scale(1,.6);} 90% { -webkit-transform: scale(1,.8);} 100% { -webkit-transform: scale(1,1);} } @keyframes prop { 0% { transform: matrix(1, 0, 0, 1, 0, 0);} 20% { transform: matrix(1, 0, 0, .8, 0, 0);} 40% { transform: matrix(1, 0, 0, .6, 0, 0);} 50% { transform: matrix(1, 0, 0, .4, 0, 0);} 60% { transform: matrix(1, 0, 0, .2, 0, 0);} 70% { transform: matrix(1, 0, 0, .4, 0, 0);} 80% { transform: matrix(1, 0, 0, .6, 0, 0);} 90% { transform: matrix(1, 0, 0, .8, 0, 0);} 100% { transform: matrix(1, 0, 0, 1, 0, 0);} } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16"> <g id="test"> <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/> </g> </svg> </body></html>謝謝你的幫助！
3 回答
慕妹3242003
TA貢獻1824條經驗 獲得超6個贊
我試圖使用CSS過渡圍繞其中心點旋轉一個簡單的齒輪svg圖形。我和Firefox有同樣的問題；轉換原點似乎沒有任何效果。
解決方案是繪制原始svg形狀，使其中心位于坐標0、0處：
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>
然后在其周圍添加一個組并轉換為所需的位置：
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<g transform="translate(150, 100)">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</g>
</svg>
現在，您可以應用應在Firefox中使用的css轉換（我根據用戶操作（js-rotateObject）使用JavaScript將類添加到HTML標記，并使用Minimizr檢查瀏覽器是否可以處理轉換和轉換（.csstransforms.csstransitions）：
#myObject{
transform: rotate(0deg);
transition: all 1s linear;
}
.csstransforms.csstransitions.js-rotateObject #myObject{
transform: rotate(360deg);
}
希望能有所幫助。
- 3 回答
- 0 關注
- 762 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消