SVG動畫中風dashoffset行爲古怪

我有以下的（簡化）SVG：SVG動畫中風dashoffset行爲古怪

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 120 100" preserveAspectRatio="none" > 
    <script type="text/ecmascript"> 
     <![CDATA[ 
     function getPathLength(path) 
     { 
      alert(path.getTotalLength()); 
     } 
     ]]> 
    </script> 
    <rect x="0" y="0" width="100%" height="100%" fill="black"/> 

    <path id="word" onclick="getPathLength(this);" fill="none" stroke="red" stroke-dasharray="83,83" 
    d="M 8.90625 3.78125 C 8.5377448 3.8134782 8.1622587 3.965423 7.8125 4.21875 C 6.5568946 6.0743722 5.8966744 8.1275786 5.125 10.15625 C 5.2.683341 4.3280721 13.093169 4.34375 14.59375 C 3.5435523 17.003468 4.9013748 18.393271 4.125 20.90625 C 3.8249969 23.220653 3.3490969 25.389271 2.96875 27.71875 C 2.775721 29.626027 1.7870007 33.314518 4.6875 33.4375 C 6.6892564 33.267533 8.9446263 33.620664 10.6875 32.53125 C 12.308551 32.345986 13.845824 31.488491 14.96875 30.4375 C 15.336184 29.709947 14.506173 29.249547 15.09375 28.53125 C 15.464699 26.390933 13.333175 28.42555 12.53125 28.4375 C 10.625482 29.096293 8.8511553 29.69647 6.875 29.65625 C 5.6218253 29.22028 6.5435685 27.168764 6.34375 26.03125 C 6.6314225 24.872659 6.8389714 23.78868 7.0625 22.53125 C 7.4982943 20.310119 8.0925706 18.009049 8.5 15.84375 C 9.2688601 14.209069 9.0995411 12.312299 9.71875 10.5625 C 10.027547 9.1134942 10.141384 7.3374588 10.5 5.90625 C 10.999008 4.514099 10.011766 3.6845653 8.90625 3.78125 z "> 
     <animate attributeName="stroke-dashoffset" begin="0s" from="100%" to="0%" dur="5s" fill="freeze" /> 
    </path> 
</svg>

當我的道路上單擊以獲得長度火狐V16報告82.4 ...這是我使用的dasharray。但是，它已經開始繪製一部分路徑，將其擦除，然後再次繪製完整路徑！？我用他的dasharay價值修飾了它，它在我使用110時很有用，但我不知道爲什麼！

我還沒有嘗試過其他的瀏覽器或火狐還較新版本的...

記滿問題轉化爲路徑的話。該路徑是不連續的 - 它有5個部分（在'e'，'z'和'h'的腳本形式中有一個循環，第一個字母'L'不與其餘的連接）。我想要做的就是讓它看起來像一個激光正在繪製字母。在之前的問題中，我瞭解到動畫效果會帶來這種效果。我終於可以使用Inkscape將文本轉換爲路徑。現在我遇到了麻煩的動畫。

我試着動畫dasharray。這適用於正確的長度，但使用較大的全字示例（7個字母長，822個單位長），看起來好像有幾條路徑在使用 - 不僅僅是5個不連續的部分，而是9條不同的路徑。當我嘗試在整個單詞上設置動畫效果時，我看不到任何動畫 - 這個單詞看起來完全形成了。

來源

2012-12-20 BigMac66

在Opera中看起來相同FWIW –

感謝您爲我檢查歌劇+1 – BigMac66

你覺得100％會是路徑的長度的100％？如果是這樣的話，那就是你錯了，因爲它是100% of the viewport width。我不認爲Opera和Firefox在這裏有一個bug，特別是當他們恰好顯示相同的東西時。

來源

2012-12-22 13:47:25

是的，這就是我的想法。感謝您指出了這一點。 – BigMac66

想通了。我試圖通過使用百分比變得可愛，這樣我就不必在每個動畫命令中放置長度 - 我所有的動畫都是100％到0％。當我用實際長度替換百分比時，它按預期工作。

所以看起來像在至少Firefox和Opera的文件清楚地說，你可以用百分比SVG實現一個bug ......

來源

2012-12-21 16:01:47 BigMac66

您知道我真的很感謝downvote的解釋。如果我的答案很糟糕，那麼很高興知道爲什麼我可以學習。 – BigMac66

SVG動畫中風dashoffset行爲古怪

回答

相關問題