SVG填不着色的背景

我有一個SVG，當我定義fill它表現爲中風SVG填不着色的背景

例如

<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

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

來源

2017-08-16 Jeanluca Scaljeri

箭頭繪製兩次（在尺寸略有不同），所以裏面有它沒有真正的。內部（就像它具有內側）是內部和外部的箭頭的形狀，重疊，所以它不是明顯有兩個形狀之間。 –

如果我們放大的箭頭，你會看到發生了什麼。

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

正如羅伯特說，你有裏面的箭頭形孔箭頭形狀。你的箭出現黑色，而不是紅色的，因爲在小尺寸的黑色描邊的粗細藏身的紅色填充。

如果你想用黑色的輪廓有一個紅色箭頭，則需要重新設計你的形狀，以便它只是一個單一的輪廓，而不是一個「雙壁」之一。

來源

2017-08-16 10:28:37

SVG填不着色的背景

回答

相關問題