We create the above-mentioned semicircle based on a circle
element:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
Centered at (100,100), a circle with radius 100 is painted. The attribute clip-path
references a <clipPath>
element with a single rect
element. This rectangular on its own would paint the upper half of the canvas black. Note, that the clipPath
element is usually placed in a defs
section.
The rect
will not be painted, however. Instead, its pixel data will be used to determine which pixels of the circle "make it" to the final rendering. Since the rectangle covers only the upper half of the circle, the lower half of the circle will vanish:
We now have a semicircle without having to deal with arcs in path elements. For the clipping, every path inside the clipPath
is inspected and evaluated together with its stroke properties and transformation. Then every part of the target lying in a transparent area of the resulting clipPath
's content will not be rendered. Color, opacity, and such have no effect as long as they don't let parts vanish completely.