Menu
I want to draw a shape in SVG that has the centre hollowed out. I asked this question for drawing a circle with a circle in the middle here. I would like to draw any shape in SVG with the middle (of another shape) hollowed out. Any ideas?
I'm thinking it could be possible using Masks or ClipPaths but I'm not sure if I understand them fully
275
To draw a hollow circle in SVG, use the <circle> element. For that, use fill=”none” and draw the outline. SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.
Several shapes can be created using SVG drawing. An SVG drawing can use and combine seven shapes: Path, Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.
Create your shape as a path, which consists of two sub-paths. The first subpath describes your outer shape; the second subpath describes the inside shape. Set the fill-rule of the pathto 'evenodd'.
e.g. for a hollowed out rectangle, we make a path consisting of two sub-paths. One for the outside rectangle; one for the inner rectangle:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 100 100 L 200 100 L 200 200 L 100 200 z
M 110 110 L 190 110 L 190 190 L 110 190 z"
fill="red"
stroke="black" stroke-width="1"
fill-rule="evenodd"/>
</svg>
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
