3

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

1 回答 1

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>
于 2013-02-12T20:06:29.763 回答