Svg 填充路徑中心

Question

我有這個帶有路徑的 Svg：

 <svg width="29" height="29" xmlns="http://www.w3.org/2000/svg"> <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" /> </svg>

我想擁有這個當前的變體，並且還能夠用 css 對其進行修改以完全填充它； 但我不能，即使使用fill-rule: nonzero ：

 svg { fill: black; fill-rule: nonzero; }

 <svg width="29" height="29" xmlns="http://www.w3.org/2000/svg"> <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" /> </svg>

有什么辦法嗎？

如果路徑有問題：我應該如何創建它才能完全用 css 填充它？

在這里，我添加了我從這里采取的另一條以這種方式工作的路徑：

 .path { stroke: #000000; fill: #6666ff; }.path1 { fill-rule: nonzero; }.path2{ fill-rule: evenodd; }

 <svg> <path class="path path1" d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20" /> </svg> <svg> <path class="path path2" d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20" /> </svg>

謝謝！

Answer 1

我認為問題出在路徑上。 嘗試不同的演示，我能夠按預期工作。 嘗試更改您的情況下的路徑，看看是否有幫助。

 <svg width="100%" height="80px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <path d="M 100 100 L 300 100 L 200 300 z" fill="black" /> </svg>