有什么方法可以在不使用 CSS3 transfrom 的情况下使用纯 Javascript/Jquery 旋转 SVG 元素。
实际上，我正在尝试使用 { transform: rotate(45deg)} 制作 SVG 动画，它在 Chrome 和 Mozilla 上运行良好 但是，在 IE 上 transform :rotate(90deg) , -ms-transfrom:rotate(90deg) dosen;t 似乎正在使用 SVG 元素。
transform:rotate(90deg) 正在旋转普通图像，但无法在 IE (IE11) 中旋转 SVG 元素。
所以，我正在寻找一些使用 JS 的替代方法。
找到了这个 jqueryrotate.com 插件，但是，这似乎是使用 CSS3 动画进行旋转并且再次不适用于 IE。
找到与问题相关的问题:How to rotate individual SVG elements with jQuery/Javascript?但是，这是使用 JS $().css({}) 设置 css 属性。
我需要找到没有 CSS3 的纯 js 方式，因为 CSS3 转换不能在 IE 上使用 SVG。
最佳答案
如果想法是旋转整个 SVG，最好是包装它并旋转包装器，这样 IE 就会进行转换，您将避免使用 SVG + 转换的 Firefox 的错误行为。
如果您不想使用 css(通过样式表或通过 javascript)，那么我想您将不得不使用 canvas。
.IeRotateSvg {
display: inline-block;
animation: rotate 2s infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg)
}
}<div class="IeRotateSvg">
<svg version="1.0" width="600" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Grad1" x1="41.1948738" y1="616.477173" x2="118.931351" y2="527.555115" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.556763,0,0,-4.315033,37.49756,2758.519)">
<stop offset="0" stop-color="#bb0000" />
<stop offset="1" stop-color="#5f0000" />
</linearGradient>
<linearGradient id="Grad2" x1="530.809509" y1="486.631012" x2="174.805481" y2="211.22995" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.960006,0,0,0.960006,11.68071,9.787565)">
<stop offset="0" stop-color="#9a0000" />
<stop offset="1" stop-color="#f22803" />
</linearGradient>
<linearGradient id="Grad3" x1="187.873566" y1="224.598923" x2="581.837463" y2="483.100006" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.960006,0,0,0.960006,11.68071,9.787558)">
<stop offset="0" stop-color="#ec6c60" />
<stop offset="1" stop-color="#d11412" />
</linearGradient>
<linearGradient id="Grad4" x1="250.398453" y1="101.536331" x2="412.094299" y2="264.54187" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.960006,0,0,0.960006,11.68071,9.787565)">
<stop offset="0" stop-color="#ffd9d9" />
<stop offset="1" stop-color="#ff2727" />
</linearGradient>
<radialGradient id="Grad5" cx="295.471252" cy="186.096344" r="179.550003" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.14292e-8,1.531256,-0.876504,-2.165967e-5,462.7486,-245.0023)">
<stop offset="0" stop-color="#ffffff" />
<stop offset="0.5" stop-color="#ffffff" />
<stop offset="1" stop-color="#d5d5d5" />
</radialGradient>
</defs>
<path d="M 287.0439 30.68461 C 287.0439 30.68461 26.88238 457.8871 26.88238 457.8871 C 21.89034 466.0472 21.89034 476.1272 26.88238 484.2873 C 31.77841 492.3513 40.99446 497.4394 50.97852 497.4394 L 571.3016 497.4394 C 581.1896 497.4394 590.4057 492.3513 595.3977 484.2873 C 600.2937 476.1272 600.2937 466.0472 595.3977 457.8871 L 335.2362 30.68461 C 330.2442 22.52457 321.0281 17.43654 311.14 17.43654 C 301.252 17.43654 292.0359 22.52457 287.0439 30.68461 z "
style="fill-opacity:0.178571;" />
<path d="M 275.5863 23.03565 C 275.5863 23.03565 15.42473 450.2381 15.42473 450.2381 C 10.4327 458.3982 10.4327 468.4783 15.42473 476.6383 C 20.32076 484.7024 29.53681 489.7904 39.52087 489.7904 L 559.8439 489.7904 C 569.732 489.7904 578.948 484.7024 583.9401 476.6383 C 588.8361 468.4783 588.8361 458.3982 583.9401 450.2381 L 323.7785 23.03565 C 318.7865 14.8756 309.5705 9.787568 299.6824 9.787568 C 289.7943 9.787568 280.5783 14.8756 275.5863 23.03565 z "
style="fill:url(#Grad1);" />
<path d="M 299.6824 31.7717 C 298.0504 31.7717 296.5144 32.6357 295.6504 33.97971 L 165.5696 247.581 L 35.48885 461.1822 C 34.62484 462.5262 34.62484 464.2542 35.48885 465.5982 C 36.35285 466.9422 37.88886 467.8062 39.52087 467.8062 L 559.8439 467.8062 C 561.4759 467.8062 563.0119 466.9422 563.876 465.5982 C 564.74 464.2542 564.74 462.5262 563.876 461.1822 L 303.7144 33.97971 C 302.8504 32.6357 301.3144 31.7717 299.6824 31.7717 z "
style="fill:url(#Grad2);" />
<path d="M 299.6464 31.7717 C 298.0144 31.7717 296.4783 32.6357 295.6143 33.97971 L 165.5336 247.581 L 35.45283 461.1822 C 34.58882 462.5262 34.58882 464.2542 35.45283 465.5982 C 36.31683 466.9422 37.85284 467.8062 39.48485 467.8062 L 559.8079 467.8062 C 561.4399 467.8062 562.9759 466.9422 563.8399 465.5982 C 564.7039 464.2542 564.7039 462.5262 563.8399 461.1822 L 303.6784 33.97971 C 302.8144 32.6357 301.2784 31.7717 299.6464 31.7717 z "
style="fill:none;stroke:url(#Grad3);stroke-width:11.52;stroke-linejoin:round;" />
<path d="M 299.7514 39.46512 C 298.2057 39.54152 296.7649 40.40413 295.9414 41.68514 L 165.8606 255.2864 L 147.7405 285.0466 C 191.8747 311.5396 243.5133 326.8068 298.7014 326.8068 C 354.6732 326.8068 407.0086 311.1293 451.5523 283.9366 L 304.0114 41.68514 C 303.1474 40.34112 301.6234 39.46512 299.9914 39.46512 C 299.9149 39.46512 299.8274 39.46136 299.7514 39.46512 z "
style="fill:url(#Grad4);stroke-width:10;stroke-linejoin:round;" />
<path d="M 286.4344 145.7244 L 129.2814 403.678 C 126.5934 408.1901 126.5934 413.7581 129.2814 418.1741 C 131.9695 422.6861 137.0575 425.4702 142.5295 425.4702 L 456.7395 425.4702 C 462.2115 425.4702 467.2996 422.6861 469.9876 418.1741 C 472.6756 413.6621 472.6756 408.1901 469.9876 403.678 L 312.9306 145.7244 C 310.2426 141.2124 305.1545 138.4284 299.6825 138.4284 C 294.2105 138.4284 289.1224 141.2124 286.4344 145.7244 z "
style="fill:url(#Grad5);" />
<path d="M 291.3968 416.3174 C 282.3931 412.0051 275.5362 401.6362 275.5362 392.3333 C 275.5362 375.0116 293.6366 361.9634 310.762 366.9398 C 322.3151 370.2971 330.1674 380.7229 330.0712 392.5774 C 329.9891 402.6474 325.6306 410.0656 316.7341 415.2773 C 309.9242 419.2665 298.5306 419.7341 291.3968 416.3174 z M 293.4432 347.9194 C 292.3177 347.3009 289.6669 345.1473 287.5529 343.1337 C 280.1664 336.0983 280.1756 336.1602 275.3607 260.8815 C 271.0805 193.9641 271.0451 192.9243 272.8817 188.1175 C 277.0134 177.3028 286.2196 172.5672 301.5485 173.3714 C 311.2922 173.8827 318.7963 177.3045 323.674 183.4607 C 327.8404 188.719 328.7462 191.6916 328.7424 200.0923 C 328.7383 209.2211 322.9068 321.1701 322.0779 328.0305 C 320.9926 337.0156 315.7466 344.3072 308.0575 347.5177 C 303.6637 349.3525 296.4136 349.5518 293.4432 347.9194 z "
/>
</svg>
</div>关于javascript - 使用纯 JS 无 CSS3 旋转 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37366531/