SVG stroke-dasharray的旋轉破折號

Question

我正在尋找動畫SVG stroke-dasharray的單個破折號的旋轉，有誰知道如何，因爲它是可能的嗎？

我意識到我可以用CSS'transform:rotate()旋轉SVG元素的整個對象，但是有什麼辦法可以旋轉單獨的破折號嗎？我也意識到我可以重新創建所有使用單個元素並旋轉它們，但這並不是我想要做的，因爲性能和簡潔的原因

Here's a demo如果您正在尋找一個。我希望廣場在它們的位置保持直立，而不是在圓形路徑中轉動。我正在重新創建this gif

P.S.我知道這些圈子並不完全對齊，I asked about that before

Answer 1

我做了樣品。

http://jsdo.it/defghi1977/sQOc

羅伯特Longson的 「標記」 的做法是非常好的！謝謝！

<?xml version="1.0" standalone="no"?> 
<svg width="400px" height="400px" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="background-color:black;"> 
<defs> 
    <rect id="markerShape" x="-1" y="-1" width="2" height="2" fill="yellow"> 
     <animateTransform attributeName="transform" type="rotate" to="360,0,0" begin="0s" dur="30s" repeatCount="indefinite"/> 
    </rect> 

    <marker id="marker1" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1"> 
     <use xlink:href="#markerShape" transform="scale(0.02,0.02)"/><!--NOTE: =1/50--> 
     <animate attributeName="orient" from="0" to="-30" begin="0s" dur="5s" repeatCount="indefinite"/> 
    </marker> 
    <marker id="marker2" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1"> 
     <use xlink:href="#markerShape" transform="scale(0.01428,0.01428)"/><!--NOTE: =1/70--> 
     <animate attributeName="orient" from="0" to="-60" begin="0s" dur="5s" repeatCount="indefinite"/> 
    </marker> 
    <marker id="marker3" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1"> 
     <use xlink:href="#markerShape" transform="scale(0.01111,0.01111)"/><!--NOTE: =1/90--> 
     <animate attributeName="orient" from="0" to="-90" begin="0s" dur="5s" repeatCount="indefinite"/> 
    </marker> 
    <marker id="marker4" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1"> 
     <use xlink:href="#markerShape" transform="scale(0.00909,0.00909)"/><!--NOTE: =1/110--> 
     <animate attributeName="orient" from="0" to="-120" begin="0s" dur="5s" repeatCount="indefinite"/> 
    </marker> 
    <marker id="marker5" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1"> 
     <use xlink:href="#markerShape" transform="scale(0.007692,0.007692)"/><!--NOTE: =1/130--> 
     <animate attributeName="orient" from="0" to="-150" begin="0s" dur="5s" repeatCount="indefinite"/> 
    </marker> 
    <marker id="marker6" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1"> 
     <use xlink:href="#markerShape" transform="scale(0.00666,0.00666)"/><!--NOTE: =1/150--> 
     <animate attributeName="orient" from="0" to="-180" begin="0s" dur="5s" repeatCount="indefinite"/> 
    </marker> 
    <marker id="marker7" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1"> 
     <use xlink:href="#markerShape" transform="scale(0.00588,0.00588)"/><!--NOTE: =1/180--> 
     <animate attributeName="orient" from="0" to="-210" begin="0s" dur="5s" repeatCount="indefinite"/> 
    </marker> 

    <polygon id="basicShape" fill="none" points=" 
     0,1 
     0.5,0.86603 
     0.86603,0.5 
     1,0 
     0.86603,-0.5 
     0.5,-0.86603 
     0,-1 
     -0.5,-0.86603 
     -0.86603,-0.5 
     -1,0 
     -0.86603,0.5 
     -0.5,0.86603" 
    /> 
</defs> 

<g> 
    <use xlink:href="#basicShape" transform="scale(50,50)" stroke-width="14" marker-mid="url(#marker1)" marker-start="url(#marker1)"/> 
    <animateTransform attributeName="transform" type="rotate" to="30,0,0" begin="0s" dur="5s" repeatCount="indefinite"/> 
</g> 
<g> 
    <use xlink:href="#basicShape" transform="scale(70,70)" stroke-width="15" marker-mid="url(#marker2)" marker-start="url(#marker2)"/> 
    <animateTransform attributeName="transform" type="rotate" to="60,0,0" begin="0s" dur="5s" repeatCount="indefinite"/> 
</g> 
    <g> 
    <use xlink:href="#basicShape" transform="scale(90,90)" stroke-width="16" marker-mid="url(#marker3)" marker-start="url(#marker3)"/> 
    <animateTransform attributeName="transform" type="rotate" to="90,0,0" begin="0s" dur="5s" repeatCount="indefinite"/> 
</g> 
<g> 
    <use xlink:href="#basicShape" transform="scale(110,110)" stroke-width="17" marker-mid="url(#marker4)" marker-start="url(#marker4)"/> 
    <animateTransform attributeName="transform" type="rotate" to="120,0,0" begin="0s" dur="5s" repeatCount="indefinite"/> 
</g> 
<g> 
    <use xlink:href="#basicShape" transform="scale(130,130)" stroke-width="18" marker-mid="url(#marker5)" marker-start="url(#marker5)"/> 
    <animateTransform attributeName="transform" type="rotate" to="150,0,0" begin="0s" dur="5s" repeatCount="indefinite"/> 
</g> 
<g> 
    <use xlink:href="#basicShape" transform="scale(150,150)" stroke-width="19" marker-mid="url(#marker6)" marker-start="url(#marker6)"/> 
    <animateTransform attributeName="transform" type="rotate" to="180,0,0" begin="0s" dur="5s" repeatCount="indefinite"/> 
</g> 
<g> 
    <use xlink:href="#basicShape" transform="scale(170,170)" stroke-width="21" marker-mid="url(#marker7)" marker-start="url(#marker7)"/> 
    <animateTransform attributeName="transform" type="rotate" to="210,0,0" begin="0s" dur="5s" repeatCount="indefinite"/> 
</g> 
</svg> 

Answer 2

stroke-dasharray是錯誤的方法，因爲您不能影響短劃線旋轉。

更好的方法是在路徑上使用方形markers，以便每個路徑頂點都具有帶有固定方向屬性的標記。路徑本身可以是透明的，所以只要標記是可見的。