1

我有以下（简化的）SVG：

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

当我单击路径以获取长度时，Firefox v16 报告 82.4... 这是我用于 dasharray 的。但它从已经绘制的部分路径开始，擦除它然后再次绘制完整路径！？我修改了他的 dasharay 值，当我使用 110 时它可以工作，但我不知道为什么！

我还没有尝试过其他浏览器或更新版本的 Firefox...

注意完整的问题是将单词转换为路径。路径是不连续的 - 它有 5 个部分（脚本形式的“e”、“z”和“h”有一个循环，第一个字母“L”不与其余部分连接）。我想做的是让它看起来像激光正在绘制字母。在之前的问题中，我了解到为 dashoffset 设置动画可以达到这种效果。我终于能够使用 Inkscape 将文本转换为路径。现在我在制作动画时遇到了麻烦。

我尝试为 dasharray 设置动画。这适用于正确的长度，但是对于更大的完整单词示例（7 个字母长和 822 个单位长），它看起来好像有多个路径在起作用——不仅仅是 5 个不连续的部分，而是 9 个不同的路径。当我尝试为完整单词上的 dashoffset 设置动画时，我根本看不到任何动画 - 单词刚刚完全形成。

4

2 回答 2

2

你认为 100% 是路径长度的 100% 吗？如果是这样，那就是你出错的地方，因为它是viewport width 的 100%。我不认为 Opera 和 Firefox 在这里有错误，特别是因为它们恰好显示相同的东西。

于 2012-12-22T13:47:25.610 回答
0

弄清楚了。我试图通过使用百分比来变得可爱，这样我就不必在每个动画命令中输入长度——我所有的动画都是 100% 到 0%。当我用实际长度替换百分比时，它按预期工作。

所以看起来至少是 Firefox 和 Opera 的 SVG 实现中的一个错误，因为文档清楚地表明你可以使用百分比......

于 2012-12-21T16:01:47.777 回答