不同筆畫寬度的SVG填充規則切割

我想在另一個圓圈中產生一個圓形，就像SVG規範中的兩個最右邊的情形http://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg一樣。但是我希望外圈有一個與內圈不同的更粗的筆畫寬度。我無法通過將兩個圓圈保持在相同的路徑定義中來解決這個問題。但是，如果將兩個圓圈分隔成不同的路徑標記，則填充規則相減將不起作用。有沒有可能的解決方案？我不喜歡用較暗的線條覆蓋，因爲在我的用例中，外部的圓形實際上是一個更復雜的形狀，我不想定義兩次。不同筆畫寬度的SVG填充規則切割

來源

2017-08-11 user2667066

沒有辦法只用一條路徑來做到這一點。

您需要使用第二個路徑，但有一個筆畫但沒有填充，以添加兩個筆劃中較粗的一個。

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"> 
 
    <rect x="1" y="1" width="1198" height="398" 
 
     fill="none" stroke="blue" /> 
 
    <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3" > 
 
    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z 
 
      M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" /> 
 
    <path d="M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" 
 
      fill="none" stroke-width="16"/> 
 
    </g> 
 
</svg>

來源

2017-08-11 11:32:36

感謝。我以前很怕那個。不幸的是，較粗的線是複雜的線，這將增加svg的大小（這是一個圖標，所以應該很小）。好吧。 – user2667066

不同筆畫寬度的SVG填充規則切割

回答

相關問題