在SVG中绘制一个空隙形状

Question

我想在SVG中绘制一个中心挖空的形状.我问这个问题的画圈,在中间的圆圈在这里.我想在SVG中绘制任何形状,中间(另一个形状)挖空.有任何想法吗？

我认为可以使用Masks或ClipPaths,但我不确定我是否完全理解它们

Answer 1

将形状创建为路径,其中包含两个子路径.第一个子路径描述了你的外形; 第二个子路径描述内部形状.将path的fill-rule设置为'evenodd'.

例如,对于挖空的矩形,我们制作一条由两个子路径组成的路径.一个用于外部矩形; 一个用于内部矩形:

<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>