添加描边并填写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>

答

它不适合所有线路（可以有锐角的文物），但您可以使用过滤器来执行双音线。这个过滤器首先在所有侧面上对单元进行腐蚀，将其重新着色为红色，并将该更细的线条放在原始蓝色的顶部。请注意，端盖有两种色调为好，所以如果你想让它完美，我会写一个标志物是适当的风格

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

两端

答

事实上，代码重复是你所追求的唯一途径...

添加描边并填写d3行

相关推荐