首先:我正在尝试做的事情暂时与 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>
最佳答案
想出了一个我认为不理想但可行的想法...=\
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>
关于html - 将 svg 形状和线条添加到 SVG 剪辑的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14838802/