css - 如何通过 CSS clip-path 属性将 SVG clipPath 与 Pattern 一起使用？

Question

初始SVG图与 pattern :

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

需要实现:

SVG 的一个实例图与 pattern引用CSS作为clip-path .

我尝试创建SVG clipPath元素并绑定(bind)到 CSS clip-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>

没有任何反应。预期结果 - 与前面的代码片段相同。

比较:

如果我使用SVG rect - CSS clip-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

剪辑路径中唯一有效的是:

• 形状元素(“圆”、“椭圆”、“线”、“路径”、“多边形”、“折线”、“矩形”)
• “文本”
• “使用”

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

获得想要的剪切路径效果的唯一方法是添加大量 <circle>元素到你的 <clipPath> .

<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 元素的 SVG 掩码(如我上面的示例)仅适用于 Firefox。要让 SVG mask 在 Chrome 中工作，您需要使用 mask或 mask-image使用外部或数据 URL(正如 Temani 在他们的回答中所做的那样)。