SVG stroke-dasharray在一个多边形上导致开始的角落出现断开连接
问题描述:
我有一个SVG多边形,我正在尝试为该笔划设置动画,但是我有一个问题,我无法让所有四个角都显示为一旦我开始使用stroke-dasharray
加入在一起。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的一个陷阱,还是有一些可以解决的问题?
答
这种情况发生在多边形或路径始于角落时。
有几件事你可以做。
1.给行平方端盖
stroke-linecap: square;
svg {
overflow: visible;
width: 300px;
}
polygon {
fill: none;
stroke: #E1B87F;
stroke-width: 6px;
stroke-linecap: square;
}
<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>
2.启动多边形的一个像素到第一侧。这样一来,终点在开始/结束角落的周围就会变得如此轻微。
points="99,1, 0,100 100,200 200,100, 100,0"
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="99,1, 0,100 100,200 200,100, 100,0" style="stroke-dasharray: 565.685px; stroke-dashoffset: 0px;" />
</svg>
+0
谢谢!你的第二个解决方案似乎是我需要做的,尽管它将会改变我的文件中的所有形状! –
暂且,我已经确定,对我来说是可行的解决办法是做动画,然后删除'行程dasharray'风格一旦完成但是,如果有办法避免这种解决方法,我仍然很好奇。 –