javascript - Clip-path/web-kit-mask 在 SVG 是单独的文件时有效，但在内联时无效

Question

我正在使用以下实现来屏蔽使用 SVG 和一些 CSS 的元素。

//styles.css
.elementToBeMasked {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    clip-path:url(rhombus.svg#rhombusclip); 
    -webkit-mask:url(rhombus.svg#rhombus); 
    -webkit-mask-repeat:no-repeat;
} ...

//rhombus.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <clipPath id="rhombusclip">
    <path id="rhombuspath" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
  </clipPath>
  <path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
</svg>

这适用于 Chrome、Safari 和 Firefox。但是，我希望为某些属性设置动画，因此我一直在尝试将 SVG 内嵌到我的 HTML 中。

这是我的内联 SVG 代码:

//index.html
<div class="elementToBeMasked">...</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
    <clipPath id="rhombusclip">
      <path id="rhombuspath" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
    </clipPath>
    <path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
</svg>

这是我更新后的 CSS:

 //styles.css
 .elementToBeMasked {
     ...
     clip-path:url(index.html#rhombusclip); 
     -webkit-mask:url(index.html#rhombus);
 }

此 实现不适用于任何浏览器。任何建议将不胜感激。

Answer 1

如果您在 styles.css 中编写 #rhombusclip 这实际上是 styles.css#rhombusclip 的简写，因为没有 styles.css 文件中的 #rhombusclip 查找失败。

您需要改为编写 index.html#rhombusclip 并对其他引用执行相同的操作。

这就是 w3c CSS 标准所说的，我所知道的除 Webkit 之外的所有 UA 都是这样工作的。我想 Webkit 会在某个时候发生变化，因为它是奇数。