Question

我试图弄清楚svg文件是如何工作的。我使用JavaScript成功找到了路径的stroke-dasharray数量：

var path = document.querySelector(".aa")
path.getTotalLength();

当您签出svg文件时，有三个元素。第一个是路径，第二个是矩形，最后一个是圆圈。

控制台会在矩形和圆圈上显示错误消息。对此有什么解决方案吗？

这是我的原始代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="imacSVG" x="0" y="0" viewBox="0 0 1800 1200" xml:space="preserve" enable-background="new 0 0 1800 1200">
      <path d="M423.5 251.1c0 0 1.2-25.2 23.6-25.2 22.3 0 909.9 0.7 909.9 0.7s19.5-0.6 19.5 21.4 0 597 0 597 1.5 21.5-21.5 21.5 -909 0-909 0 -22.5-1.4-22.5-21.8C423.5 824.2 423.5 251.1 423.5 251.1z" class="aa"/>
      <rect x="466.6" y="271.6" width="865.5" height="540" class="bb"/>
      <circle cx="900.5" cy="246" r="8.2" class"cc"/>
</svg>

Answer 1

getTotalLength()功能仅适用于<path>元素。您需要为<rect>和<circle>找到不同的解决方案。

显然，对于圆圈，您可以使用（2 * r * PI），对于矩形，您可以使用（2 *（宽度+高度））。

如何在圆和矩上获得准确的笔画数量-dasharray？

1 个答案: