1

I am using the following implementation to mask an element using an SVG and some 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>

This works fine across Chrome, Safari and Firefox. However, I'm hoping to animate some of the properties, and so I've been trying to bring the SVG inline into my HTML.

This is my inline SVG code:

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

And this is my updated CSS:

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

This implementation doesn't work across any browser. Any suggestions would be greatly appreciated.

4

2 回答 2

1

如果你写这#rhombusclip实际上styles.css是一个简写，styles.css#rhombusclip因为文件中没有#rhombusclip，styles.css所以查找失败。

您需要改为编写index.html#rhombusclip并为其他参考做同样的事情。

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

于 2013-11-27T09:27:31.117 回答
0

快速更新，以下似乎内联工作，但仅在 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>
于 2013-11-28T21:35:56.177 回答