添加描邊並填寫d3行

我想在d3行添加stroke和fill。添加描邊並填寫d3行

但是如果我添加fill到path我得到。

我能解決我的代碼重複的問題。我認爲有一個更好的解決方案。例如

簡單的svg。

<svg height="150" width="200" fill="red" stroke="blue" stroke-width="4"> 
 
    <path d="M80,50L110,80L140,90L170,70L20080L320,70"></path> 
 
</svg> 
 

 
<svg height="150" width="200" fill="none"> 
 
    <path d="M80,50L110,80L140,90L170,70L20080L320,70" stroke="red" stroke-width="8"></path> 
 
    <path d="M80,50L110,80L140,90L170,70L20080L320,70" stroke="blue" stroke-width="4"></path> 
 
</svg>

來源

2017-10-15 Anton

它不適合所有線路（可以有銳角的文物），但您可以使用過濾器來執行雙音線。這個過濾器首先在所有側面上對單元進行腐蝕，將其重新着色爲紅色，並將該更細的線條放在原始藍色的頂部。請注意，端蓋有兩種色調爲好，所以如果你想讓它完美，我會寫一個標誌物是適當的風格

<svg height="150" width="200" fill="none" stroke="blue" stroke-width="4"> 
 
    <defs> 
 
    <filter id="twotone-line"> 
 
    <feMorphology operator="erode" radius="1"/> 
 
    <feColorMatrix type="matrix" values="0 0 0 0 1 
 
             0 0 0 0 0 
 
             0 0 0 0 0 
 
             0 0 0 1 0"/> 
 
    <feComposite operator="over" in2="SourceGraphic"/> 
 
    </filter> 
 
    </defs> 
 
    <path filter="url(#twotone-line)" d="M80,50L110,80L140,90L170,70L20080L320,70"></path> 
 
</svg>

兩端

來源

2017-10-15 21:16:36

事實上，代碼重複是你所追求的唯一途徑...

來源

2017-10-15 19:09:51 scooterlord

添加描邊並填寫d3行

回答

相關問題