css – 如何使用单一路径绘制SVG曲线？

2023年6月2日 203次阅读

我想要的是在下面的图像 –

 
《css – 如何使用单一路径绘制SVG曲线？》

I have 3 relative question regarding this

我们可以用一条路画出整个画布.

2.如果我们只能使用多个路径绘制整体,那么给它们动画是否方便？

3.在这两种情况下,任何人都可以通过样本指导正确的方式.

这是我到目前为止的地方……因为你可以看到我不是SVG的专家,当然,你可以使用圆圈作为大点.先感谢您.

svg {
  width: 100%;
}

.straightLine {
  height: 3000px;
  position: relative;
}

.st0 {
  fill: none;
  stroke-dashoffset: 3px;
  stroke: #000000;
  stroke-width: 5;
  stroke-miterlimit: 10;
}
<div class="straightLine">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1000" style="enable-background:new 0 0 1280 800;" xml:space="preserve">
	<g class="all">
	<path id="line1" class="st0" stroke-dasharray="10,9" d="M 35 -17 C 0 190 50 83 600 109 "/>
	<path id="line1" class="st0" stroke-dasharray="10,9" d="M 600 109  c 64.9 0 90.4 40.5 90.4 90.4"/>
	</g>
  </svg>
</div>

最佳答案 使用类似的东西：

<path d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />

如the documentation所示,路径可以包含任意数量的组件.

作为总结：

M/m    Move current position
L/l    Draw a line
H/h    Draw a horizontal line
V/v    Draw a vertical line
C/c    Draw a cubic Bezier
Q/q    Draw a quadratic Bezier
A/a    Draw a circular/elliptal arc
Z/z    Close path

通常,大写指令指定绝对坐标,小写指令指定相对.

点赞