Question

我试图围绕它的中心无限旋转svg形状。

这是我到目前为止所做的。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
     width="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55"
     xml:space="preserve">
<g>
    <polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1 
        384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732 
        223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064 
        266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795 
        463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16 
        584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936  " transform="rotate(15, 40, 40)" dur="0.1s" calcMode="discrete" repeatCount="indefinite"/>

    <circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/>
</g>
</svg>

......但无法让它发挥作用。

我是否需要使用javascript旋转它，因为我认为我已经看到类似于xml的类似内容。

此外，第二个形状也应位于第一个形状的中心。

感谢您的帮助！

Answer 1

你在寻找这样的东西吗？ http://jsfiddle.net/t97w9cqm/7/
我只是用CSS动画旋转它。

#Layer_1 {
    transform-origin: 50% 50%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

关键是transform-origin

Answer 2

您缺少动画，添加动画，您应该设置。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
     width="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55"
     xml:space="preserve">
<g>
    <polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1 
        384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732 
        223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064 
        266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795 
        463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16 
        584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936" calcMode="discrete">
        <animateTransform 
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          from="0 398 639"
          to="360 398 639"
          dur="1s"
          repeatCount="indefinite"/>
    </polygon>

    <circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/>
</g>
</svg>

在Windows 7上的Chrome版本46.0.2490.80 m中成功测试过。我的'星'旋转，黑色环朝向恒星的中心。

svg围绕其中心不断旋转形状

2 个答案: