SVG路径与另一个路径的一段重合

Question

我的最终目标是有条纹的生物的照片，例如tiger，nautilus或monarch butterfly caterpillar。

假设我已经有一个路径元素描述了该生物轮廓的某些部分，特别是我有这个部分（我第一张图片中的红色部分）：

<path d="M ... x0,y0 C x1,y1 x2,y2 x3,y3 C ... " />

现在我想创建一些新的路径元素来为生物添加条纹。我需要这些路径的顶部与现有的轮廓路径重合，或者至少足够接近人眼（我的第二个图像中的绿色部分，如果你可以将它们制作出来的话。）

这是我家用电脑上的一个爱好项目，所以到目前为止我的开发环境是Paint绘制初步模型，Notepad ++编辑SVG代码，Chrome浏览器查看结果。如果结果值得，我不反对安装其他工具。

您尝试了什么？

老式的反复试验。选择一些可能接近的点，写入路径，保存，预览。调整一两点 在路径中，重复一遍。

您认为可能有用吗？

我可以想象一个广泛的或潜在的答案，包括“试验和错误是你将得到的最好”直到“你应该使用[[我从未听说过的一些工具]]。”

我想知道是否可以将轮廓路径放在<defs>部分中，并以某种方式在轮廓和条带中使用它。我还怀疑有一种方法可以输入“C”路径段的8个x，y值，并得到贝塞尔曲线的等式。从那里，我可能会推出自己的代码来计算其余部分。

Answer 1

您将需要使用剪辑路径。这是你的形状的模型，用作我们的起点。

<svg width="400" height="400">
  <!-- tiger's back -->
  <path d="M 50 100 C 100 50 150 50 200 75 C 250 100 300 100 350 50" fill="none" stroke="green"/>
  <!-- stripes -->
  <polygon points="100 0 125 200 150 0"/>
  <polygon points="175 0 200 200 225 0"/>
  <polygon points="250 0 275 200 300 0"/>
</svg>

为了制作剪辑路径，我们希望以与“虎背”相同的路径开始。然而，它需要是一个封闭的形状。所以继续它，以便它包围条纹的区域。

这是一个以红色显示剪辑路径形状的片段。

<svg width="400" height="400">
  
  <!-- tiger's back -->
  <path d="M 50 100 C 100 50 150 50 200 75 C 250 100 300 100 350 50" fill="none" stroke="green"/>
  <!-- stripes -->
  <polygon points="100 0 125 200 150 0"/>
  <polygon points="175 0 200 200 225 0"/>
  <polygon points="250 0 275 200 300 0"/>

  <!-- clip shape -->
  <path d="M 50 100 C 100 50 150 50 200 75 C 250 100 300 100 350 50
           L 350 300 50 300 Z" fill="none" stroke="red"/>


</svg>

最后，将路径剪辑形状转换为实际的<clipPath>元素，并使用它剪切条纹。现在，不会绘制位于剪辑路径之外的条纹部分。

<svg width="400" height="400">
  
  <defs>
    <clipPath id="myclip">
      <path d="M 50 100 C 100 50 150 50 200 75 C 250 100 300 100 350 50
               L 350 300 50 300 Z"/>
    </clipPath>
  </defs>

  <!-- tiger's back -->
  <path d="M 50 100 C 100 50 150 50 200 75 C 250 100 300 100 350 50" fill="none" stroke="green"/>
  <!-- stripes -->
  <g clip-path="url(#myclip)">
    <polygon points="100 0 125 200 150 0"/>
    <polygon points="175 0 200 200 225 0"/>
    <polygon points="250 0 275 200 300 0"/>
  </g>
</svg>

要定义路径一次并将其用于渲染路径和剪辑路径，请执行以下操作：

<svg width="400" height="400">
  
<defs>
  <clipPath id="myclip">
    <use xlink:href="#tigerbody"/>
  </clipPath>
</defs>

<!-- tiger's back -->
<path id="tigerbody" d="M 50 100 C 100 50 150 50 200 75 C 250 100 300 100 350 50
                      L 350 300 50 300 Z" fill="none" stroke="green"/>
<!-- stripes -->
<g clip-path="url(#myclip)">
  <polygon points="100 0 125 200 150 0"/>
  <polygon points="175 0 200 200 225 0"/>
  <polygon points="250 0 275 200 300 0"/>
</g>
</svg>