Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使SVG元素透明(如遮罩)_Svg - Fatal编程技术网

使SVG元素透明(如遮罩)

使SVG元素透明(如遮罩),svg,Svg,如何使用多边形作为遮罩,使圆中的区域透明? 我办不到 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50"

如何使用多边形作为遮罩,使圆中的区域透明? 我办不到

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
    <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50"/>
</svg>

我想说的是,尝试使用创建一个SVG文件,在彼此之间绘制项目,同时选择它们,然后使用
路径->排除
菜单来执行此操作。保存您的文件,然后您可以查看
.svg
文件的代码,看看它做了什么。

掩码非常简单。这里描述了它们:

在您的情况下,只需添加几行即可

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">

    <circle cx="50" cy="50" r="50" mask="url(#hole)"/>

    <mask id="hole">
       <rect x="0" y="0" width="100" height="100" fill="white"/>
       <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50" fill="black"/>
    </mask>
</svg>

在遮罩定义中,我们必须添加一个圆形大小的白色矩形,以使
可见(白色表示不透明),并使
黑色(透明)来创建孔