SVG減去對象和路徑

我想創建一個SVG字體，所以我需要創建一些路徑。一個字母的由下面的路徑定義爲：SVG減去對象和路徑

Path

我與svgwrite創建的，通過創建兩個circles和rect，然後使用Inkscape中取兩個圓的差異，並與交叉點直線，如下所示： Combination

我的問題是，如果我可以直接用SVG或svgwrite做到這一點？要麼執行布爾操作，要麼創建一個如上所述的路徑。

我試圖創建一個黑色和白色的圓圈狀的路徑：

d="M0,128 A128,128,1,1,0 0 127.9 Z\ 
    M 32 128 A 96 96 1 1 0 32 127.9 Z"

與fill="#000000", stroke = "none", fill-rule="evenodd" 但是這個戒指不是由SVG字體編輯公認的（它只是創建了一個黑盤）。

我也試圖創建的路徑

d="M0,128 A128,128,1,1,0 0 127.9 Z\ 
M 32 128 A 96 96 1 1 0 32 127.9 Z \ 
M 38 128 l 0 15 l 180 0 l 0 -30 l -180 0 z"

組合（外圈，內圈，水平線），但儘管我可以看到右側看的結果時，我打開SVG，字體編輯器將不承認創建的路徑看起來像這樣：

path generated

是否有某種方式來產生編程上面第一張圖片的路徑？

來源

2014-09-01 Massagran

好像你可以做到這一點在SVG作爲三個獨立的子路徑組成的明確的化合物路徑 - 外圓加上上部和下部幾乎半圈（通過橢圓弧曲線） - 以及適當的填充規則。你的字體編輯器可以處理這個問題，因爲它不需要通過shape-differencing來計算任何路徑。 – martineau 2014-09-01 15:45:46

@martineau，這正是我的問題。你如何創建一個由3個橢圓弧曲線組成的顯式複合路徑>>？我的嘗試（請參閱d和fill-rule =「evenodd」）在我的描述中，但我不知道如何改進它們。 – Massagran 2014-09-02 11:45:19

我不是建議相同的3個子路徑。第一個是外部的，一個完整的圓圈（就像你有的那樣），但其他兩個都是閉合的橢圓弧曲線（上部和下部的部分圓）。不幸的是，我不能在我的評論中包含圖片。 – martineau 2014-09-02 13:20:04

以下@馬蒂諾的建議，並this SO問題，我來到了這個解決方案：

創建了兩個半區的圓
創建兩個小半圓（不太圓）

然後使用fill-rule: evenodd來組合所有這些。

d=" 
M 128, 128     
m -128, 0      
a 128,128 0 1,0 256,0\  
a 128,128 0 1,0 -256,0\ 
M 32,112 a 1.15 1 0 1 1 194, 0z\ 
M 32,142 a 1.15 1 0 1 0 194, 0z\ 
"

返回是這樣的： e letter path from script 。不幸的是，Inkscape的SVG字體編輯器只呈現這樣的： Imgur

所以我不得不繼續調查那裏的問題可能來自。歡迎進一步的建議。

來源

2014-09-02 17:46:59 Massagran

第一個弧具有負（0）的拉伸角，第二個弧必須具有正（1）的拉伸角並從相對側拉出才能達到所需的效果。

#--------------------------N-----------↓↓↓-↓↓↓-------------P-↓↓↓-↓↓↓↓↓---------------------------------------------- 
d="M 0 128 A 128 128 1 1 0 0 127.9 Z M 224 128 A 96 96 1 1 1 224 127.9 Z M 38 128 L 0 15 L 180 0 L 0 -30 L -180 0 Z"

來源

2016-06-01 11:47:22 Ghost

過濾器不產生路徑，他們只是生產的位圖（所以如果你需要的路徑 - 這是錯誤的答案）。但是這裏有一個使用SVG Filter的版本 - 因爲你用它來標記問題（在Firefox中不起作用 - 不能使用對象作爲feImage輸入 - 你必須將它們內聯爲數據URI）。

<svg width="200px" height="200px"> 
 
    <defs> 
 
    <circle id="inner" cx="80" cy="80" r="60" fill="white" /> 
 
    <line id="crossbar" x1="20" x2="140" y1="80" y2="80" stroke-width="22" stroke="black"/> 
 
    
 
    <filter id="combine" x="0%" y="0%"> 
 
     <feImage xlink:href="#inner" result="innerwhite"/> 
 
     <feImage xlink:href="#crossbar" result="crossbarthing"/> 
 
     <feComposite operator="xor" in="SourceGraphic" in2="innerwhite"/> 
 
     <feComposite operator="over" in2="crossbarthing"/> 
 
    </filter> 
 
    </defs> 
 
    <circle filter="url(#combine)" cx="100" cy="100" fill= 
 
"black" r="80"/>" 
 
</svg>

來源

2016-06-02 15:20:21

SVG減去對象和路徑

回答

相關問題