Malebranche test1

by Richard Hunter

HTML

<div class='foo-div'></div>
<div class='bar-div'></div>
<svg height="0" width="0">
    <defs>
        <clipPath id="foo-path" clipPathUnits="userSpaceOnUse">
            <polygon points="0,0 30,280 36,320 90,240 120,120 150,40" />
        </clipPath>
        <clipPath id="bar-path" clipPathUnits="objectBoundingBox">
            <polygon points="0,0 0.1,0.7 0.12,0.8 0.3,0.6 0.4,0.3 0.5,0.1" />
        </clipPath>
    </defs>
</svg>

<h1>Algorithm</h1>

<ol>
    <li>extract clip path from src svg</li>
    <li>increment through components of clip path
        <br><i>For each element</i>

        <ol>
            <li>extract 'path'</li>
            <li>convert coords to proportional equivalents</li>
        </ol>
    </li>
    <li>return transformed clippath</li>
</ol>

CSS

body {
    margin : 0;
}
.foo-div, .bar-div {
    width : 300px;
    height : 400px;
    float : left;
}
.foo-div {
    background : orange;
    -webkit-clip-path : url(#foo-path);
}
.bar-div {
    background : lightblue;
    -webkit-clip-path : url(#bar-path);
}
h1 {
    clear : both;
}
ol {
}