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。

此外，第二個形狀也應該在第一個形狀的中心。

感謝您的幫助！

來源

2015-12-02 tgifred

你在找這樣的事嗎？
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

來源

2015-12-02 17:42:07 user3307017

你缺少動畫，添加動畫，你應該設置。

<?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米試驗成功我有「星」朝向恆星的中心黑環錠紡。

來源

2015-12-02 17:51:25

svg無限旋轉其中心周圍的形狀

回答

相關問題