Question

我试图将一个SVG clippath添加到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>

SVG clippath视图框无法正常工作

1 个答案: