为什么在更新strokeDasharray之后需要更新strokeDashoffset？

2024-04-27 • 问答

在下面，我创建了一个仅画在边缘周围的红色圆圈。如果将strokeDasharray设置为500 628（应为破折号长度和破折号偏移量），则会得到要查找的部分圆。但是，之后我不能再设置strokeDasharray = "600"来仅设置破折号长度。我必须包括破折号偏移量，如先前的strokeDasharray = "600 628"。

为什么我不能单独更改短划线长度？

实际代码如下：el.style.strokeDasharray="500 628";

我只想通过以下方式进行更改：el.style.strokeDasharray="200";

    var el=document.getElementsByTagName("circle")[0];
    el.style.strokeDasharray="500 628";

svg {
  width: 240px;
  height: 240px;
  background: #eee;
  transform:rotate(-90deg);
}
svg #shape {
  fill: none;
  stroke: red;
  stroke-width: 4;
}

<svg>
  <circle id='shape' cx='120' cy='120' r='100' />
</svg>

maguanying412 回答：为什么在更新strokeDasharray之后需要更新strokeDashoffset？

否，您传递的第二个值不是strokeDashoffset。这是第二个长度值。

根据documentation：

用逗号和/或空格分隔的长度（可以有单位标识符）和百分比的列表。百分比表示距离占当前视口的百分比。负值是错误。如果这些值的总和为零，则呈现笔划，就好像未指定任何值一样。

在此示例中您可以看到它是不同的：

svg {
  width: 240px;
  height: 240px;
  background: #eee;
  transform:rotate(-90deg);
}
svg #shape1 {
  fill: none;
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 600 100;
}
svg #shape2 {
  fill: none;
  stroke: blue;
  stroke-width: 4;
  stroke-dasharray: 600;
  stroke-dashoffset: 100;
}

<svg>
  <circle id='shape1' cx='120' cy='120' r='100' />
</svg>
<svg>
  <circle id='shape2' cx='120' cy='120' r='100' />
</svg>

javascript svg

本文链接：https://www.f2er.com/3164699.html

为什么在更新strokeDasharray之后需要更新strokeDashoffset？

maguanying412 回答：为什么在更新strokeDasharray之后需要更新strokeDashoffset？

大家都在问