Question

我想在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>

Answer 1

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

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

添加笔划并填入d3行

2 个答案: