在SVG中绘制空洞的形状 [英] Draw a voided shape in SVG

问题描述

我想在SVG中绘制一个挖空中心的形状. 我问这个问题是在此处. 我想在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?

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

I'm thinking it could be possible using Masks or ClipPaths but I'm not sure if I understand them fully

推荐答案

将形状创建为路径，该路径由两个子路径组成.第一个子路径描述了您的外部形状；第二个子路径描述内部形状.将路径的填充规则设置为"evenodd".

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>

这篇关于在SVG中绘制空洞的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！