如何在圆和矩形上获得确切数量的笔划破折号？

Posted 2023-02-24

【中文标题】如何在圆和矩形上获得确切数量的笔划破折号？

【英文标题】：How to get exact amount of stroke-dasharray on circle and rect?

【发布时间】：2015-04-28 02:46:55

【问题描述】：

我试图弄清楚 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"   class="bb"/>
      <circle cx="900.5" cy="246" r="8.2" class"cc"/>
</svg>

【问题讨论】：

我在这里 [link]***.com/a/30376660/3189314 为矩形、圆形、多边形、线和路径做了一些函数来获取长度，然后在 dasharrays 上使用它

【参考方案1】：

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

显然，对于圆形，您可以使用 (2 * r * PI)，对于矩形，您可以使用 (2 * (width + height))。

【讨论】：

感谢您的解决方案！如果这些有特定的功能，我会更好。