Question

我有一个svg文件，我使用CSS绘制。当我这样做时，它绘制为双线。我想画成单行。这怎么可能？

css代码

svg {
  max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
svg path {
  stroke-width: 1;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: draw;
  animation-timing-function: linear;
}

这是我的svg文件链接我做了什么

https://jsfiddle.net/rijo/t5pva50c/2/

我的预期结果是这样的

https://jsfiddle.net/rijo/52135t3g/4/

Answer 1

您的路径是双倍的，它们包含元素的外部部分。

让您的路径成为绘图的内部部分，并且单一。

然后，将它们设置为设置足够高的笔触宽度

将stroke-linecap设置为舍入，以获得现在已有的路径结束。

您会发现现在的路径要容易得多！

#test {
    stroke: blue;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-dasharray: 120 90;
    stroke-dashoffset: 0;
    animation: show 2s infinite linear;
}

@keyframes show {
    from {stroke-dashoffset: -80}
      to {stroke-dashoffset:   60}
}

<svg>			
      <path id="test" fill="none" d="M67 39 l 39 25"/>
	

</svg>

Answer 2

您的SVG已被绘制，以便路径描述每个黑色形状的轮廓。例如，你的灯泡实际上由两条路径组成：一条用于外部黑色形状，另一条用于透明孔。 “光线”形状实际上是具有圆形末端的矩形。

需要重新绘制SVG，以便每个黑色形状都是沿着形状中心延伸的粗黑线。因此灯泡的一条路径，以及“光线”的五条短直线。

如何绘制svg文件？

2 个答案: