CODEWITHSUNDEEP
htmlcsssvg
priyanka
priyanka

Reputation: 99

SVG clippath viewbox not working

I am attempting to add an SVG clippath to a div element.

I want the clippath to span the full div element.

I gave the SVG a viewbox and gave the clippath polygons points within this viewbox.

However, the polygons do not seem to adjust their height and width's based on the viewbox or the container's height and width. It remains static.

How do I get this to work? Here is my SVG code:

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

This is my HTML code:

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

And this is my 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);}

Please help! Here's the fiddle: http://jsfiddle.net/xhh7a/3/

Thanks!

Upvotes: 2

Views: 3586

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

I think this is what you're looking for. It's sized to the shape, at least it was when I ran it in 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>

Upvotes: 1

Related Questions