I have this Svg with a path:
<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>
And I want to have this current variant, and also be able to modify it with css to fill it completely; but I cant, even with 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>
Is there any way to do it?
If it is a problem with the path: how should I create it to be able to fill it completely with css?
Here I add another path I took from here that is working this way:
.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>
Thanks!
I think the problem is with the path. Trying out a different demo and I was able to get fill to work as expected. Try changing the path in your case see if that helps.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.