SVG剪切路径视图框不起作用

Question

我正在尝试将SVG剪切路径添加到div元素。

我希望clippath跨越整个div元素。

我为SVG提供了一个视图框，并在此视图框内提供了clippath多边形点。

但是，多边形似乎并未根据视框或容器的高度和宽度来调整其高度和宽度。 它保持静态。

我该如何工作？ 这是我的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="100" height="100" viewBox="0 0 100 100" >
    <clipPath id="svgClip">
        <polygon points="0 0 0 100 100 100"/>
    </clipPath>
    <path id="svgMask">
        <polygon points="0 0 0 100 100 100"/>
    </path>
</svg>

这是我的HTML代码：

<div class="div11"></div>

这是我的CSS：

.div11{
   background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index: 5000;
  -webkit-clip-path: url(clip.svg);
  clip-path: url(clip.svg#svgClip);
  -webkit-mask: url(clip.svg);}

请帮忙！ 这是小提琴： http : //jsfiddle.net/xhh7a/3/

谢谢！

Answer 1

我认为这就是您要寻找的。 它的大小适合形状，至少是我在Firefox中运行时的大小。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
        <polygon points="0 0 0 1 1 1"/>
    </clipPath>
    <path id="svgMask" maskContentUnits="objectBoundingBox">
        <polygon points="0 0 0 1 1 1"/>
    </path>
</svg>
<div class="div11"></div>