添加描边并填充d3线答案

【问题标题】：Adding stroke and fill in d3 line添加描边并填充d3线
【发布时间】：2017-10-16 05:16:36
【问题描述】：

我想在 d3 行添加 stroke 和 fill。

但如果我将 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>

【问题讨论】：

标签： javascript css d3.js svg

【解决方案1】：

它并不适合所有线条（锐角处可能存在伪影），但您可以使用滤镜制作双色调线条。该过滤器首先在所有边上将线条侵蚀一个单位，将其重新着色为红色，并将这条较细的线条放在原来的蓝色之上。请注意，端盖也是两种色调，所以如果你想要它完美，我会为端部写一个适当样式的标记

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

实际上，重复代码是做你所追求的唯一方法......

【讨论】：