ストロークを追加してd3行に入力してください

Question

strokeとfillをd3行に追加します。

result

しかし、私は私が得るfillpathに追加した場合。

fill

私は、コードの重複と私の問題を解決することができます。私はもっ​​と良い解決策があると思う。

たとえば、単純な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>

Answer 1

あなたが後にしている何をする唯一の方法です、フィルターを使用して2つの音色の線を演奏することができます。このフィルターは、最初にラインをすべての辺の単位でエッƒし、赤色に再現し、この細い線を元の青の上に置きます。あなたはそれが完璧にしたい場合、私は適切

<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>

をスタイル設定され両端のマーカーを記述しますので、エンドキャップは2は、同様にトーンされていることに注意してください

Answer 2

実際には、コードの重複は（鋭い角度でアーティファクトが存在することができる）それはすべての行のために完璧ではない...