将 svg 形状和线条添加到 SVG 剪辑的 div答案

【问题标题】：Adding svg shapes and lines to a SVG clipped div将 svg 形状和线条添加到 SVG 剪辑的 div
【发布时间】：2013-02-13 06:01:49
【问题描述】：

首先：我正在尝试做的事情暂时与 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>

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：