Question

我想使用SVG形状剪辑我的元素，该形状在同一个HTML文件（内联SVG）中定义。

适用于clip-path：

＆＃13;

div {
  width: 200px;
  height: 200px;
  background-color: red;
  clip-path: url("#c");
}

＆＃13;

<div>
  <svg>
    <defs>
      <clippath id="c">
        <circle cx="100" cy="100" r="50" />
      </clippath>
    </defs>
  </svg>
</div>

＆＃13;

但是当使用蒙版时，虽然这在Firefox中运行良好，但它在Chrome中不应用任何遮罩：

＆＃13;

div {
  width: 200px;
  height: 200px;
  background-color: red;
  mask: url("#m");
}

＆＃13;

<div>
  <svg>
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
      </mask>
    </defs>
  </svg>
</div>

＆＃13;

搜索（example），Chrome似乎不希望蒙版引用定义，而是指整个图像。有没有办法在内联时引用整个图像？或者，我还能做些什么来从内联元素中应用蒙版？

Answer 1

这是一个丑陋的js解决方案，

抓住<mask>，
将其复制到新的svg元素_{中（幸运的是，chrome不需要宽度和高度）}，
将其转换为数据URI并设置为webkit-image CSS规则，以便它不会污染其他浏览器。

＆＃13;

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var mask = document.querySelector('mask');
svg.innerHTML = mask.innerHTML;
var str = new XMLSerializer().serializeToString(svg);
str = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(str);
var div = document.getElementById('mask-me');
div.style.webkitMaskImage = 'url('+str+')';

＆＃13;

#mask-me {
  width: 200px;
  height: 200px;
  background-color: red;
  mask: url(#m);
}

＆＃13;

<div id="mask-me">
  <svg>
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
      </mask>
    </defs>
  </svg>
</div>

＆＃13;

Answer 2

上次我查看Chrome并不支持mask媒体资源。 It only supports mask-image.

我想仍然如此。

如何应用可在Chrome中使用的内联SVG中的蒙版？

2 个答案: