1
我有这个例子svg咖啡杯上的花应该与转换源中心一起旋转。SVG和FIREFOX和变换的起源，为什么不工作？
在其他浏览器中，它像champ一样工作，但在Firefox中随机旋转。
有其他人有这个问题吗？有没有简单的修复或即时通讯？ ：D
感谢所有帮助家伙:)！
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
\t width="696.667px" height="428.666px" viewBox="0 0 696.667 428.666" enable-background="new 0 0 696.667 428.666"
\t xml:space="preserve">
\t <style>
\t \t #coffeeFlower {
\t \t \t -webkit-animation-name: coffeeFlower-animation;
\t \t \t animation-name: coffeeFlower-animation;
\t \t -webkit-animation-duration: 20s;
\t \t animation-duration: 20s;
\t \t -webkit-animation-iteration-count: infinite;
\t \t animation-iteration-count: infinite;
\t \t -webkit-transform-origin: center;
\t \t -ms-transform-origin: center;
\t \t transform-origin: center;
\t \t -webkit-animation-timing-function: linear;
\t \t animation-timing-function: linear;
\t \t }
\t \t @-webkit-keyframes coffeeFlower-animation {
\t \t 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
\t \t 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
\t \t }
\t \t @keyframes coffeeFlower-animation {
\t \t 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
\t \t 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
\t \t }
\t </style>
<g>
\t <g>
\t \t <g>
\t \t \t <g>
\t \t \t \t <path fill="#FF00CD" d="M402.577,58.794c135.259-11.36,221.089,81.12,232.3,157.827
\t \t \t \t \t c9.135,62.505-17.688,206.188-222.337,207.712c-204.65,1.523-207.344-171.682-207.243-205.123
\t \t \t \t \t C205.399,185.767,241.826,72.295,402.577,58.794z"/>
\t \t \t \t <path fill="#9B009B" d="M400.396,115.509c45.462-1.239,113.712-17.373,126.306-46.262
\t \t \t \t \t c12.594-28.891-57.617-51.955-128.93-50.012c-71.313,1.944-114.239,30.769-113.681,51.271
\t \t \t \t \t C284.65,91.009,324.625,117.573,400.396,115.509"/>
\t \t \t \t <path fill="#FF00CD" d="M394.548,3.81c11.438-1.887,25.438,1.115,26.92,12.675c1.482,11.56-11.712,13.737-16.993,14.609
\t \t \t \t \t c-8.362,1.38-19.837-0.618-24.626-8.452C373.64,12.485,386.072,5.208,394.548,3.81z"/>
\t \t \t \t <path fill="#FF00CD" d="M227.215,307.564c0,0-50.859-0.397-61.369-25.981s-4.278-58.761-19.869-74.393
\t \t \t \t \t c-15.591-15.633-22.577-10.09-23.638-16.306s8.574-12.723,17.439-14.749c8.866-2.025,25.924,1.971,33.274,9.799
\t \t \t \t \t s19.619,32.472,35.664,32.034c16.045-0.437,29.351,29.53,30.704,46.443S227.215,307.564,227.215,307.564z"/>
\t \t \t \t <path fill="#FF00CD" d="M600.25,149.313c0,0,38.16-7.285,68.258,16.873c30.097,24.158,30.396,67.861,11.344,88.898
\t \t \t \t \t c-12.95,14.299-49.288,24.537-49.288,24.537l0.859-33.922c0,0,26.791,1.053,30.665-20.462
\t \t \t \t \t c3.874-21.516-2.754-35.608-13.646-42.448s-30.479-5.414-30.479-5.414l-17.738-28.955"/>
\t \t \t \t <path fill="#9B009B" d="M141.682,180.544c-4.545,0.125-15.033,4.871-14.068,7.521s13.493,4.093,22.383,2.958
\t \t \t \t \t c8.89-1.134,14.141-4.846,9.611-7.398C155.078,181.071,147.922,180.374,141.682,180.544z"/>
\t \t \t </g>
\t \t \t <path id="coffeeFlower" fill="#CDFF31" d="M436.924,236.235c0,0,35.948-25.799,9.224-56.801c-18.286-21.213-37.782-3.01-41.195,19.973
\t \t \t \t c-3.413,22.982,1.027,37.672,1.027,37.672s-6.398-37.141-37.238-32.453s-51.193,48.327-26.609,61.121s50.694,5.351,50.694,5.351
\t \t \t \t s-36.616,17.155-30.538,42.571c6.079,25.416,40.803,15.045,48.435-1.32c7.633-16.365,7.633-16.365,7.633-16.365
\t \t \t \t s12.673,36.734,36.975,30.996c24.302-5.738,26.406-27.338,19.312-40.608s-30.296-24.757-30.296-24.757s43.457,13.627,60.36-8.377
\t \t \t \t c16.904-22.003-5.356-48.324-24.119-45.121C461.827,211.321,436.924,236.235,436.924,236.235z"/>
\t \t \t <path fill="#00FFFF" d="M411.361,236.933c0,0-17.852,11.93-10.048,26.528c7.803,14.598,25.147,8.739,32.29-0.88
\t \t \t \t C440.746,252.962,436.484,220.091,411.361,236.933z"/>
\t \t </g>
\t \t <g>
\t \t \t <path fill="#FF00CD" d="M13.559,335.13c0,0,12.598-5.814,45.546-6.783c32.948-0.97,65.896,3.876,72.68,13.566
\t \t \t \t c6.784,9.69-4.845,82.37-62.989,82.37S2.899,358.387,3.869,350.634C4.838,342.882,4.838,338.036,13.559,335.13z"/>
\t \t \t <path fill="#FF9B00" d="M13.559,343.851c-3.876,14.536,16.474,15.506,51.36,16.475s59.113-5.814,60.082-11.629
\t \t \t \t c0.969-5.814-27.025-9.889-41.67-10.66C64.919,337.067,15.325,337.229,13.559,343.851z"/>
\t \t \t <path fill="#FF00CD" d="M129.847,358.387c0,0,18.412,6.784,21.319,19.382s0,24.227-10.66,29.071c-10.66,4.846-31.01,0-31.01,0
\t \t \t \t l6.783-14.536c0,0,16.474,9.691,22.289,0c5.814-9.69-10.66-22.288-10.66-22.288L129.847,358.387z"/>
\t \t </g>
\t \t <path id="kohviJuga" fill="#FF9B00" d="M135.634,190.937c0,0,3.591,1.055,10.046,0.43c6.455-0.627,9.624-1.438,9.624-1.438
\t \t \t s-4.441-26.975-10.921-40.859c-13.567-29.071-49.422-27.133-60.082-2.906c-7.364,16.735-20.35,202.533-20.35,202.533h19.381
\t \t \t c0,0,6.228-180,13.567-192.844c7.752-13.566,31.01-17.442,35.855,10.66C134.433,176.251,135.634,190.937,135.634,190.937z"/>
\t </g>
\t <path fill="#FF9B00" d="M55.229,315.748c0,0-5.814-30.04-16.474-25.195S55.229,315.748,55.229,315.748z"/>
\t <path fill="#FF9B00" d="M91.084,322.532c0,0,0.969-10.66,6.784-9.691S91.084,322.532,91.084,322.532z"/>
</g>
</svg>示例代码在这里：https://codepen.io/mrmagnus/pen/jmOVPq
在Internet Explorer 11中，它根本不旋转。它在边缘38中都没有。 – Tolokoban
IE不支持在SVG元素上进行CSS转换。 –