Question

我有一个SVG多边形，我试图为笔画设置动画，但是我有一个问题，一旦我开始使用stroke-dasharray，我就无法将所有四个角连接在一起。

以下是一个例子：

svg {
  overflow: visible;
  width: 300px;
}

polygon {
  fill: none;
  stroke: #E1B87F;
  stroke-width: 6px;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
    <polygon points="100,0 0,100 100,200 200,100" style="stroke-dasharray: 565.685px; stroke-dashoffset: 0px;" />
</svg>

我如何处理破折号数组或偏移量似乎并不重要，顶角总是断开连接。

这只是处理SVG的一个陷阱，还是可以做些什么来解决它？

Answer 1

当多边形或路径从角落开始时会发生这种情况。

你可以做几件事。

<强> 1。给行方形端盖

!queue->empty()

＆＃13;

stroke-linecap: square;

＆＃13;

svg {
  overflow: visible;
  width: 300px;
}

polygon {
  fill: none;
  stroke: #E1B87F;
  stroke-width: 6px;
  stroke-linecap: square;
}

＆＃13;

<强> 2。将多边形一个像素启动到第一侧。这样终点就会在开始/结束角度稍微变圆。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
    <polygon points="100,0, 0,100 100,200 200,100" style="stroke-dasharray: 565.685px; stroke-dashoffset: 0px;" />
</svg>

＆＃13;

points="99,1, 0,100 100,200 200,100, 100,0"

＆＃13;

svg {
  overflow: visible;
  width: 300px;
}

polygon {
  fill: none;
  stroke: #E1B87F;
  stroke-width: 6px;
}

＆＃13;

多边形上的SVG stroke-dasharray导致起始角显示为断开连接

1 个答案: