如何用SVG路径绘制字母S.

Question

对于大多数人来说这可能是SVG 101,但是,我需要使用路径绘制字母'S'.我可以制作一堆线条,但似乎有两个弧线可以顺利完成.

这就是我到目前为止所做的......

<svg width="100" height="100">
  <path d="M20 100 L20 80 L60 80 L60 60 L20 60 L20 0 L80 0 L80 20 L40 20 L40 40 L80 40 L80 100 Z" stroke-linejoin="round" stroke="#808600" stroke-width="0" stroke-linecap="round" fill="#1EB287" transform="translate(0,0)">
</svg>

Answer 1

是的,您可以按照建议的方式使用两个弧绘制一个简单的S. 这是一个简单的可能性:

<path stroke-width="4" fill="none" stroke="black"
  d="M70 30 A20 20 0 1 0 50 50 A20 20 0 1 1 30 70" />

以下是更全面的解释.

svg中有几种不同的方法来绘制曲线.对于这个用例,即制作字母S,最简单的方法之一是使用两个圆圈部分,特别是两个3/4圆圈.您可以在路径的"d"字符串中使用arc(A/a)命令.有关如何创建弧的更多信息,请参阅MDN文档和SVG规范.

简而言之,在提供弧的起始坐标(例如,使用前面的'M','移动',命令)之后,使用'A'(或'a')来指示使用绝对(或相对)坐标的弧段.(我选择绝对,'A'.)然后按顺序提供以下内容:

• x弧半径,以像素为单位
• y弧形半径(以像素为单位):我将前两个相同,使得弧是圆的一部分而不是椭圆.
• 以度为单位的x轴旋转:这仅适用于椭圆弧,与圆弧无关,因为旋转圆是不明显的.因此将此保留为0.
• 0或1大弧标志:在钟面上你可以从3点钟到6点钟(或从12点钟到9点钟,它们具有相同的相对位置)两个不同方式,短路(flag = 0),即通过4和5点,或长路(flag = 1),即通过2,1,1,12,11,10,9,8和7点.请参阅下面的图表.
• 0或1扫描标记:您可以在负角度方向上移动的两个点之间绘制圆弧,即逆时针(标记= 0)或正角方向,即顺时针(标记= 1).请参阅下面的图表.
• 最终的x坐标,以像素为单位
• 最终的y坐标,以像素为单位

我做了下面的图来更好地解释arc命令中的两个标志,即large-arc-flag和sweep-flag.在四种情形中的每一种情况下,起点和终点坐标以及圆半径始终相同.唯一改变的是那两面旗帜.您可以看到更改这些标志如何更改生成的弧.

下面的示例显示了使用包含起始坐标后跟两个此类弧的路径以红色绘制的简单S. 为了明确这些弧线的位置,我还在完整的"S"路径上叠加了另外两个单独的弧线,更细和蓝色和绿色,它们对应于全红色"S"的第一和第二弧形部分. .关于两个标志的值,蓝色弧对应于上图中标记为"C"的那个,而绿色弧对应于标记为"D"的那个.

<svg width="400" height="300">
  <g transform="translate(20,20)">
    <g stroke-width="40" fill="none">
      <path d="M100 50 A50 50 0 1 0 50 100 A50 50 0 1 1 0 150" stroke="red"   />
    </g>
    <g stroke-width="8" fill="none">
      <path d="M100 50 A50 50 0 1 0 50 100                   " stroke="blue"  />
      <path d="                    M50 100 A50 50 0 1 1 0 150" stroke="green" />
    </g>
  </g>
</svg>

使用"弧"(即"A" /"A")命令来绘制在SVG曲线可以是具有挑战性的,但并非不可能.但是,这是实现您请求的曲线类型的最简单方法.

请注意,我还通过编程'S'曲线中心线的轨迹来简化路径,并使行程宽20像素.这与您尝试绘制轮廓的方式形成对比,即为所有边缘点提供坐标.如果使用20像素的笔划然后画出中心线,即使你的块-y squar-ish'S'也可以更简单.如果你愿意,你可以绘制一个轮廓,有时候你会想要,例如,让你有能力以任何你想要的方式绘制形状.但是,如果您希望路径的厚度保持不变,则会增加笔划并仅绘制中心线.