如何通过CSS剪辑路径属性将SVG剪辑路径与Pattern一起使用

Question

带有pattern的初始SVG图形：

<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">
<circle cx="2" cy="2" fill="white" r="0.8"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="100" height="100" fill="url(#img-dotted-dots)"></rect>
</mask>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" mask="url(#img-dotted-mask)" fill="#1063B1"></path>
</svg>

需要实现：

具有pattern的SVG图的一个实例，用于将CSS重新引用为clip-path。

我已经尝试创建SVGclipPath元素，并通过这种方式绑定到CSSclip-path

.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}

<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path"> 
<pattern
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox"
x="0" y="0" height="0.1" width="0.1">
<circle cx="0" cy="0" fill="white" r="0.5"></circle>
</pattern>
</clipPath>
</defs>
</svg>

什么也没发生。预期结果-与上一个代码段相同。

用于比较：

如果我使用SVGrect-CSSclip-path工作。如果pattern-没有

.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}

<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path"> 
<rect width="1" height="1"></rect>
</clipPath>
</defs>
</svg>

Answer 1

剪辑路径中唯一有效的东西是：

• 形状元素("圆形"、"椭圆"、"直线"、"路径"、"多边形"、"折线"、"矩形"(
• '文本'
• '使用'

此外，您可以使用动画元素等来设置剪辑路径的动画。但是，仅使用这些元素的形状。图案、过滤器等效果将被忽略。

获得想要作为剪切路径工作的效果的唯一方法是向<clipPath>添加大量<circle>元素。

<clipPath>
<circle>
<circle>
<circle>
<circle>
... etc ...
</clipPath>

但你可以用口罩代替。面具允许图案。

.figure {
width: 300px;
height: 300px;
-webkit-mask: url(#img-dotted-mask);
mask: url(#img-dotted-mask);
background-color: #1063B1;
}

<p>This only works in Firefox</p>
<div class="figure"></div>
<svg width="0" height="0">
<defs>
<pattern id="img-dotted-pattern"
viewBox="0 0 1 1"
patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="1" height="1" fill="black"/>
<circle cx="0.5" cy="0.5" fill="white" r="0.15"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="2000" height="2000" fill="url(#img-dotted-pattern)"/>
</mask>
</defs>
</svg>

然而，应用于HTML元素的inlineSVG掩码，就像我上面的例子一样，只能在Firefox中工作。要使SVG掩码在Chrome中工作，您需要将mask或mask-image与外部或数据URL一起使用(正如Temani在回答中所做的那样(。

Answer 2

您可以使用掩码和径向梯度来重新创建相同的东西

.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);  
/*radius here                           size here*/
-webkit-mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
}
body {
background:#f2f2f2;
}

<div class="figure"></div>

或者考虑mask属性中的SVG。确保退出#，并正确设置视框和宽度/高度，以获得完美的重复

.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);  
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
}
body {
background:#f2f2f2;
}

<div class="figure"></div>