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

Posted 2023-03-06

【中文标题】如何使用单路径绘制 SVG 曲线？

【英文标题】：How to draw SVG curved using single path?

【发布时间】：2018-01-11 01:03:14

【问题描述】：

我想要的是下图 -

我对此有 3 个相关问题

1.我们可以用single path.绘制整个画布吗？

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>

【问题讨论】：

您最好在专门的程序（如 Illustrator 或 GIMP）中绘制路径，然后将其导出为 SVG。手绘这些线条是可能的，但也非常复杂。

@Terry 我自己在 illustrater 中创建了该图像，但这不是我想要的。我有一些动画要使用这个<path> 在页面的滚动上做，这就是为什么我正在寻找一个 CSS 选项。所以如果可以帮助我.ty

你想做什么样的动画？你的问题不清楚。您想为路径设置动画吗？或者沿路径为圆圈的位置设置动画？

@Terry 我想要的是使用连接我的一些图像的页面滚动来绘制线条。像这样 - ***.com/a/33054738/7629714

您可以使用stroke-dashoffset 简单地为线条绘制设置动画，而根本不需要更改路径：css-tricks.com/svg-line-animation-works。换句话说，您绘制完整路径，并根据滚动位置确定偏移值。

【参考方案1】：

使用类似的东西：

<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

一般来说，大写指令指定绝对坐标，小写指令指定相对坐标。

【讨论】：

还有一件事，对于圆点，我们应该在<svg> 中使用<circle> 还是有办法将它与<path> 结合起来呢？

实心圆圈需要一个新元素。是使用 <circle> 还是使用另一个 <path> 取决于您。

我们怎么能position它在同一个地方。我们可以使用position: absolute 或者<svg> 中的其他方式

类似<circle cx="400" cy="50" r="10" />。 cx = center x, cy = center y, r = radius.