html - 将 svg 形状和线条添加到 SVG 剪辑的 div

Question

首先:我正在尝试做的事情暂时与 chrome 不兼容。请使用 firefox 检查示例。

这是我所做的:

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>

我想做的是在被剪裁的 html 元素之上绘制，以便通过 ms paint 为剪切图像绘制一些重音和边框，如下所示。这对 SVG 可行吗？也许我可以向 .clip3 添加另一个属性并以某种方式将其链接到一些 svg 形状？

我正在尝试很多不同的东西 - 但它们只是猜测，我找不到关于如何做到这一点的任何资源或信息。

我曾希望它能像这样工作:

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

Answer 1

想出了一个我认为不理想但可行的想法...=\

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>