Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Draw a voided shape in SVG

Tags:

svg

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

like image 275
luketorjussen Avatar asked Nov 20 '11 09:11

luketorjussen


People also ask

How do you make a SVG hollow circle?

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.

What is an SVG shape?

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.


1 Answers

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>

enter image description here

like image 144
GarethOwen Avatar answered Oct 13 '22 00:10

GarethOwen