3

I've been trying to understand how to apply SVG clip-paths to HTML elements, and have run into some oddities.

Here is the fiddle: http://jsfiddle.net/jakemcgraw/8hr99/

<div id="diamond1" class="diamond">
    <div id="clip1">
        <div></div>
    </div>
</div>
<div id="diamond2" class="diamond">
    <div id="clip2">
        <div></div>
    </div>
</div>
<div id="diamond3" class="diamond">
    <div id="clip3">
        <div></div>
    </div>
</div>
<svg>
    <defs>
        <clippath id="relative_path">
            <polygon points="50% 0, 100% 50%, 50% 100%, 0 50%"></polygon>
        </clippath>
    </defs>
</svg>
<svg>
    <defs>
        <clippath id="absolute_path">
            <polygon points="100 0, 200 100, 100 200, 0 100"></polygon>
        </clippath>
    </defs>
</svg>

css:

#clip1 {
    -webkit-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
    -moz-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
    -o-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
    clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
}

#clip2 {
    -webkit-clip-path: url(#relative_path);
    -moz-clip-path: url(#relative_path);
    -o-clip-path: url(#relative_path);
    clip-path: url(#relative_path);
}

#clip3 {
    -webkit-clip-path: url(#absolute_path);
    -moz-clip-path: url(#absolute_path);
    -o-clip-path: url(#absolute_path);
    clip-path: url(#absolute_path);
}

A few things to note:

  1. The inline clip-path css declaration only works with Chrome and Opera.

  2. SVG with relative dimensions (i.e. 50%) doesn't seem to work for any browser at all.

  3. SVG with absolute dimensions only works in Firefox.

Note that the second and third elements disappear completely in Chrome and Opera. Now, take a look at this fiddle: http://jsfiddle.net/jakemcgraw/7S5Lk/

The one works correctly in Firefox, but in Chrome and Opera, the 10px margin has moved the underlying element, but NOT the clip. It appears that the SVG clipPath dimensions are applying to the document as a whole, as opposed to the element in question.

Unsurprisingly, neither of these two fiddles work in IE10. I have seen SVG work in IE10, so perhaps the only problem is the mixing of SVG and HTML? Not sure.

Note as well that neither work in Safari.

Is my implementation wrong? Is there a proper way to mix SVG clip-paths with HTML elements that I'm missing?

3 Answers 3

4

The trick is to use clipPathUnits="objectBoundingBox" and modify your points to be a ratio of the bounding box.

This method creates a relative clip path, and works in Safari.

See the following fiddle: http://jsfiddle.net/7S5Lk/6/

1
  • 1
    Anyone else noticed that while this fiddle works great, if you try to put two clipped images in a single page it fails in webkit browsers? One image is clipped, the rest just disappear.
    – mtjhax
    Commented Aug 3, 2014 at 0:13
0

Adding clipPathUnits="objectBoundingBox" to clip-path is the solution. But if there are several diamonds in the same page, safari (version 6.1) seems to display only the first one and clips the others (chrome and firefox display all diamonds as expected).

0

I'm not sure it will reply to your question, but rather than assigning percentage to a clip path my alternative solution would be to use viewBox attribute of the svg tag.

Here a simple example:

<svg viewBox='0 0 100 8' style="width: 100%;">
    <defs>
        <clipPath id="clippy">
            <rect x="${normalizedValue}" y="0" width="2" height="8" />
        </clipPath>
    </defs>
    <rect x="0" y="0" width="100" height="8" fill="red" clip-path="url(#clippy)" />
</svg>

Using css (width: 100%) I defined an svg which has a bar as wide as the main container, meanwhile using viewBox I defined it to be a rectangle which internally will be sized 100x8.

As you can notice, inside the svg everything is drawn relatively to the viewBox. ${normalizedValue} is a variable which in my case contains a number between 1 and 100 (no 'px' or '%', just a number), therefore I don't have to take care of sizing.

Maybe this approach could help you, you just create many svg(s) with the same size (using css) and using a viewbox you easily keep the same proportions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.