我已經使用svg上的標籤<path>進行了第一次使用，並想知道是否有更好的方法來做到這一點。它按我的意願出現，在這些區域只有黑色，其餘區域是透明的（而不僅僅是白色）。我的第一張svg圖片

我的代碼：

<svg xmlns="http://www.w3.org/2000/svg"> 
    <path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" /> 
</svg>

視覺路徑（啓動對綠球，遵循橙色線，直到紅球，是不需要藍線與Z = closepath）：

我只用了L s，因爲我還需要了解其他人是如何工作的。 M開始，Z結束，我想。

我的學習方式是通過大量測試和少閱讀。那麼，對於開始學習svg的任何建議，不僅僅是指導者或指導教程的鏈接？這可能會得到一些downvotes。

來源

2017-02-09 user7393973

我想大多數編程據悉槽測試和不讀。學習編程時，至少這是我的情況。 – Persijn

@Persijn - 同意。只需檢查是否有任何技巧或大多數程序員自己在關於svg的「困難方法」中學習，然後才能着手解決這些問題。 – user7393973

您在這裏似乎沒有具體的可回答的問題。 –

假設您希望「L」形狀爲孔 - 這看起來像是您想要的 - 那麼您應該使用子路徑。 IE瀏覽器。使用「移動」路徑命令（「M」）。你不應該使用連接線跳從一個形狀到另一個，就像你正在做，有兩個原因：

根據不同的渲染器，這些零寬條子有時可見。特別是對於一些顏色組合。
如果需要，您不能在形狀上使用筆觸顏色。例如：

<svg width="200" height="200"> 
 
    <path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" stroke="green" stroke-width="4"/> 
 
</svg>

這裏是你應該怎麼做：

每個在你的路徑中的單個形狀的創建封閉路徑。

// top left triangle 
M 10 10 L 10 160 L 160 10 Z 
// top left 'L' 
M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z 
// central shape 
M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z 
// top right chevron 
M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z 
// bottom right triangle 
M 200 50 L 50 200 L 200 200 Z 
// bottom right 'L' 
M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z 
// bottom left chevron 
M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z

將這些全部合併到一個單一的路徑，你會得到你想要的結果。見下文。

如果路徑重疊/相交，通常會打孔。有時候他們不會，但如果您對用於定義路徑（順時針或逆時針）的方向保持一致，他們將會。

<svg width="220" height="220"> 
 

 
    <path d="M 10 10 L 10 160 L 160 10 Z 
 
      M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z 
 
      M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z 
 
      M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z 
 
      M 200 50 L 50 200 L 200 200 Z 
 
      M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z 
 
      M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z" stroke="green" stroke-width="4"/> 
 

 
</svg>

來源

2017-02-10 05:27:17

確實很好。我不知道命令「M」可以這樣使用。 – user7393973

Svg。我會怎麼做：

這裏是如何填寫規則的工作原理：MDN fill-rule
在後，雖然我會用MDN polygon

<svg viewBox="0 0 100 100"> 
 
    <!--Middle element --> 
 
    <path d="M25,75, 25,62.5 62.5,25 75,25 75,37.5 37.5,75 25,75 Z" /> 
 
    <!--Corners --> 
 
    <path d="M 100,0 100,12.5 87.5,25 87.5,12.5 75,12.5 87.5,0Z" /> 
 
    <!-- Look how all the numbers are opposite of the ones above!--> 
 
    <path d="M 0,100 12.5,100 25,87.5 12.5,87.5 12.5,75 0,87.5Z" /> 
 
    <!-- shape within a shape with fill rule--> 
 
    <path fill-rule="evenodd" d="M 0,0 75,0 0,75 
 
           M12.5,12.5 20,12.5 20,15 15,15 15,30 12.5,30" /> 
 
    <path fill-rule="evenodd" d="M 100,100 25,100 100,25 
 
           M87.5,87.5 80,87.5 80,85 85,85 85,70 87.5,70" /> 
 
</svg>

（個人意見），通過設置不同的路徑，其更容易形狀閱讀代碼。

來源

2017-02-09 16:06:53 Persijn

我的第一張svg圖片

回答

Svg。我會怎麼做：

相關問題