Question

基于此示例：https://jsfiddle.net/julianljk/69z2wepo/49105/

我正在尝试使用蒙版图案填充SVG形状。我有两个盒子。第一种只采用点图案。这样可以，但是在css中无法更改点的颜色。

我有第二个盒子，它有一个填充物，然后用相同的图案掩盖。这应该导致蓝点。

但它没有正确掩盖。或者至少，它做得不一致。第一个框将显示在Chrome中，但第二个框不会，至少在我去检查之前。然后它决定开启。：/。两者都正确地显示在Firefox中。

由于我借用的示例在Chrome中运行良好，我认为我做错了。

<style>
      .mask-dots {
        mask: url(#mask-dots);
      }      
      .pattern-dots {
        fill: url(#pattern-dots)
      }

      .blue {
        fill: blue;
</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="393px"
     height="528px" viewBox="0 0 393 528" enable-background="new 0 0 393 528" xml:space="preserve">
<g id="underskirt-4">
      <rect  class="pattern-dots" width="100" height="100"/>
    <rect x="110" class="blue mask-dots" width="100" height="100"/>
</g>
</svg>
<svg><defs><pattern id="pattern-dots" width="50" height="50" 
          patternUnits="userSpaceOnUse">
         <path fill="white" d="M15.946,12.651c0,1.905-1.544,3.45-3.45,3.45c-0.953,0-1.815-0.386-2.439-1.011
    c-0.624-0.624-1.01-1.486-1.01-2.439c0-1.905,1.544-3.45,3.45-3.45S15.946,10.746,15.946,12.651z"/>
     </pattern>
        <mask id="mask-dots">
          <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-dots)" />
        </mask>             
      </defs>
</svg>

Jsfiddle，第二个框没有显示（至少不在Chrome中）。 https://bl.ocks.org/jfsiii/7772281

包含模式的掩码在SVG中不起作用

0 个答案: