Question

我有一个svg，当我定义fill时，它表现为笔画

例如

<svg stroke="black" fill="red">
    <path d="M10 10 H 90 V 90 H 10 Z"/>
</svg>

这可以按预期工作，但是当我有

时

<svg stroke="black" fill="red">
    <path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>

它没有。任何建议为什么填充不起作为另一个svg？

DEMO

＆＃13;

<svg stroke="black" fill="red">
    <path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>

<svg stroke="black" fill="red">
  <path d="M10 10 H 90 V 90 H 10 Z"/>
</svg>

＆＃13;

Answer 1

如果我们放大箭头，你会看到发生了什么。

＆＃13;

<svg viewBox="0 0 40 40"
     stroke="black" fill="red" stroke-width="0.2">
    <path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>

＆＃13;

正如罗伯特所说，你有一个箭头形状，里面有一个箭头形状的洞。你的箭头显示为黑色，而不是红色，因为在那么小的尺寸下，黑色笔划的厚度隐藏了红色的填充。

如果你想要一个黑色轮廓的红色箭头，那么你需要重新设计你的形状，使它只是一个轮廓，而不是一个双层的＆＃34;之一。

SVG填充不着色背景

1 个答案: