Question

有没有办法在不使用CSS3 transfrom的情况下使用纯Javascript / Jquery旋转SVG元素。

实际上我正在尝试使用{transform: rotate(45deg)}和在Chrome和Mozilla 上正常工作来为SVG制作动画，但是，在IE transform:rotate(90deg)上，-ms-transfrom:rotate(90deg)选择了;似乎正在使用SVG元素。

transform:rotate(90deg)正在旋转普通图像，但无法在IE（IE11）中旋转SVG元素。

所以，我正在寻找使用JS的替代品。

发现这个 jqueryrotate.com 插件但是，这似乎是使用CSS3动画进行旋转，再次不能使用IE。

找到与问题相关的问题：How to rotate individual SVG elements with jQuery/Javascript?但是，这是使用JS $（）。css（{}）设置css属性。

我需要找到纯粹的js方式没有CSS3，因为CSS3过渡不适用于带有SVG的IE。

Answer 1

您可以在要旋转的svg元素上设置属性transform。例如，如果要使用id='el'旋转元素，则可以执行以下操作：

document.getElementById('el').setAttribute('transform', 'rotate(90)');

Answer 2

如果想要旋转整个SVG，最好是将其包装并旋转包装器，这样IE就会进行转换，你将避免使用SVG +转换的Firefox的错误行为。

如果您不想使用css（通过样式表或通过javascript），那么您将不得不使用画布。

.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>

使用纯JS无CSS3旋转SVG

2 个答案: