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

【问题标题】：Clip-path/web-kit-mask works when SVG is seperate file, but not when inlineClip-path/web-kit-mask 在 SVG 是单独文件时有效，但在内联时无效
【发布时间】：2013-12-12 19:22:17
【问题描述】：

我正在使用以下实现来使用 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);
 }

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

【问题讨论】：

我认为同时使用clip-path 和mask（或-webkit-mask）是个坏主意。它们可能看起来做同样的事情，但它们是独立的属性。您是否尝试过使用 clip-path 和 -webkit-clip-path 代替？那么至少您使用的是“相同”的属性。

标签： javascript css svg clipping css-mask

【解决方案1】：

如果您在 styles.css 中写入 #rhombusclip，这实际上是 styles.css#rhombusclip 的简写，并且由于 styles.css 文件中没有 #rhombusclip，因此查找失败。

您需要改为写index.html#rhombusclip，并且对其他引用也这样做。

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

【讨论】：

谢谢你 - 它似乎没有修复它，但这无疑也是一个问题。
有更多时间来测试它似乎不起作用。将样式也内联并仅使用标识符似乎确实有效。
抱歉，罗伯特，我对你投了反对票，但是经过数小时测试我为矩形元素生成倒置掩码的特定用例后，我意识到你实际上是对的，但我不能再改变反对票了。
我编辑了我的答案，因此您现在可以根据需要进行投票。完全取决于你:-)

【解决方案2】：

快速更新，以下似乎内联工作，但仅在 Firefox 中。

        <style>
        .box {
            position: fixed; 
            width: 450px; 
            height: 320px; 
            top: 10%; 
            left: 10%; 
            clip-path:url(#rhombusclip); 
            -webkit-mask:url(#rhombus); 
            -webkit-mask-repeat:no-repeat;
        }
        </style>
        <div class="box"></div>
        <svg width="1000" height="1000">
            <defs>
                <clipPath id="rhombusclip">
                    <path 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" />
            </defs>
        </svg>

【讨论】：