javascript - 如何获得圆形和矩形上笔画虚线数组的精确数量？

Question

我试图弄清楚 svg 文件是如何工作的。我使用 JavaScript 成功找出了路径的描边破折号的数量:

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

当您 checkout 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 * (宽度 + 高度))。