Home/ Questions/Q 9294741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T21:26:27+00:00

First: the stuff I’m trying to do is not compatible with chrome for the

  • 0

First: the stuff I’m trying to do is not compatible with chrome for the time being. Please use firefox to check the examples.

Here is what I’ve done:

http://jsfiddle.net/Robodude/ev6VF/1/

<style type="text/css">
    .clip3 { 
        clip-path: url(#c3); 
    }
</style>

    <svg height="0">
        <defs>

        </defs>

        <clipPath id="c3">
            <polygon points="75,0 225,0 275,100 225,200 75,200 25,100" />
        </clipPath>
    </svg>
    <div class="container left">
        <div id="Image1" class="Image1 image clip3"></div>
        <div id="Image2" class="Image2 image clip3"></div>
        <div id="Image3" class="Image3 image clip3"></div>  
    </div>

What I would like to do, is draw on top of the html elements that were clipped in order to draw some accents and borders to the cut images as seen below via ms paint. Is this possible with SVG? Perhaps I can add another property to .clip3 and link it to some svg shapes somehow?

Hex image frames that need a partial border

I’m trying out lots of different things – but they are just guesses and I can’t find any resources or info on how to do this.

How I had hoped it would work was something like this:

<style type="text/css">
    .clip3 { 
        clip-path: url(#c3); 
        border: url(#b1);
    }
</style>

        <defs>
            <polyline id = "b1" points="75,0 225,0 275,100 225,200 75,200 25,100" stroke = "blue" stroke-width = "5"/>
        </defs>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Came up with an idea that I don’t consider ideal but it works… =\

    http://jsfiddle.net/Robodude/ev6VF/4/

    <svg height="0">
    <clipPath id="c3">
        <polygon points="75,0 225,0 275,100 225,200 75,200 25,100"/>
    </clipPath>

    <defs>
        <polyline id="top" points="225,200 75,200 25,100" style="fill:none;stroke:blue;stroke-width:10" />
        <polyline id="middle" points="225,0 275,100 225,200" style="fill:none;stroke:blue;stroke-width:10" />
        <polyline id="bottom" points="25,100 75,0 225,0" style="fill:none;stroke:blue;stroke-width:10" />
    </defs>

</svg>

<div class="container left">
    <div id="Image1" class="Image1 image clip3">
        <svg width="100%" height="100%">
            <use xlink:href = "#top"/>
        </svg>
    </div>
    <div id="Image2" class="Image2 image clip3">
        <svg width="100%" height="100%">
            <use xlink:href = "#middle"/>
        </svg>
    </div>
    <div id="Image3" class="Image3 image clip3">
        <svg width="100%" height="100%">
            <use xlink:href = "#bottom"/>
        </svg>
    </div>  
</div>
    • 0