3

まず、私がやろうとしていることは、当分の間クロムと互換性がありません。例を確認するには、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>

私がやりたいことは、ms ペイントを介して以下に示すように、カットされた画像にいくつかのアクセントと境界線を描画するために、クリップされた html 要素の上に描画することです。これはSVGで可能ですか？おそらく、別のプロパティを .clip3 に追加して、それを何らかの方法でいくつかの svg 形状にリンクできますか?

部分的な境界線が必要な 16 進画像フレーム

私はさまざまなことを試していますが、それらは単なる推測であり、これを行う方法に関するリソースや情報が見つかりません.

私がそれがうまくいくことをどのように望んでいたかは、次のようなものでした：

<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 に答える