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圆圈。您可以在＆＃39; d＆＃39;中使用arc（A / a）命令。路径的字符串。有关如何创建弧的详细信息，请参阅MDN documentation和SVG spec。

简而言之，在提供弧线的起始坐标后（例如，使用前面的＆＃39;对于＆＃39;移动＆＃39 ;,命令），使用＆＃39; A＆＃39; （或＆＃39; a＆＃39;）使用绝对（或相对）坐标指示弧段。（我选择绝对，＆＃39; A＆＃39;。）然后按顺序提供以下内容：

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

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

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

的绿色弧

＆＃13;

<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>

＆＃13;

使用＆＃39; arc＆＃39; （即＆＃39; A＆＃39; a＆＃39;）在SVG 中绘制曲线的命令具有挑战性，但并非不可能。但是，这是实现您请求的曲线类型的最简单方法。

请注意，我还通过编程＆＃39; S＆＃39;中心线的轨迹来简化路径。曲线，只是使笔画宽20像素。这与您尝试绘制轮廓的方式形成对比，即为所有边缘点提供坐标。即使是你的方块，也不是你的方块。如果您使用20像素的笔划然后绘制中心线可能会更简单。如果您愿意，可以绘制大纲，有时您会想要，例如赋予你以任何你想要的方式绘制形状的能力。但是，如果您希望路径的厚度保持不变，则会增加笔划并仅绘制中心线。

Answer 2

我一直致力于私有（但是公开的）javascript库来编写上述路径的脚本。您可以在www.stretchsketch.com处看到它，并且该库位于github

不确定您要问的是什么，但我认为在SVG的路径d属性中创建S的最短方法是使用bezier curves。

通常arcs是101 x 101非常强大但对99％的用例来说太难了。

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

2 个答案: