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」路徑段的八個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>