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

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

您需要改为编写index.html#rhombusclip，并对其他参考文献也这样做。

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

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

当SVG是单独的文件时，Clip-path / web-kit-mask可以工作，但在内联时则不行

2 个答案: