4

DIVクリップしたい要素が あります。

-webkit-clip-pathSVGclipPath要素を参照して要素をクリップするために使用できます。

HTML の例

<svg width="0" height="0">
    <clipPath id="clipping">
        <polygon points="0 100, 300 30, 220 290" />
    </clipPath>
</svg>

<div id="tiles"></div>

CSS の例

#tiles {
    background:red;
    width:300px;
    height:300px;
    -webkit-clip-path: url(#clipping);
}

JSFiddleを参照してください。

しかし、どうすればその形から形を切り取ることができますか? たとえば、赤い三角形に別の三角形を入れますか? クリッピング パスをマスクするにはどうすればよいですか?

数年前から Firefox がサポートしていると言っているリソースを見たことがありますが、Chrome で動作させるにはそれが必要なので、Firefox で動作させることさえ試みていません。

Chrome が をサポートしていることを読み-webkit-mask-image、それが動作する例を見てきました ( Twitter の鳥の例を参照)。しかし、jsfiddle で再作成しようとすると、外部 SVG ファイルでは機能するが、インライン SVG では機能しないことに気付きました。jsfiddleを参照してください。

クリッピング パスのクリッピングは機能せず、属性clipPathをサポートしていないように見えるため、クリッピング パスのマスキングも機能しないようです。mask

誰にも解決策がありますか、それとも Chrome でこれが可能になるまで待つ必要がありますか?

4

2 に答える 2

3

クリップパス ポリゴンを設定すると、凸形状に限定されません。

指定すれば

<polygon points="0 100, 220 290, 300 30, 220 100, 220 220, 180 100, 220 100, 300 30"></polygon>

それは外側の三角形（あなたが持っていたものと同じ）を描き、その中に入って別の三角形を切り取ります。

更新されたフィドル

このようにすると、内側の三角形を外側の三角形とは反対の回転方向に描くことを忘れないでください。

編集

はい、クリップをクリップできます。

この更新されたデモを見る

CSSは

<svg width="0" height="0">
    <clipPath id="clip1">
       <polygon points="0 100, 220 290, 300 30"></polygon>
    </clipPath>
    <clipPath id="clip2" clip-path="url(#clip1)">
        <polygon points="0 0, 9999 0, 9999 9999, 0 9999, 0 0, 150 140, 180 190, 220 30, 150 140"></polygon>
    </clipPath>
</svg>

2 つの注意事項:

まず、この構文はあまりユーザーフレンドリーではありません。私の知る限り、たとえば 5 つのポリゴンを使用する場合は、それらすべてを互いにチェーンする必要があります。

第二に、ポリゴンを「カットスルー」したい（または少なくとも望んでいるように見える）ため、それらを「ネガティブ」にする必要があります。これは、周囲を巨大な長方形で囲むことで達成されます ( 9999 座標)。それについての良いニュースは、コピーして貼り付けることができるコードであることです.

とにかく、別の回答で警告されているように、このテクノロジーは実際には安定していません。

于 2013-07-24T18:05:35.990 に答える
2

現在、ブラウザではクリッピングが未熟であるため、clip-pathSVG や SVG を使用すると問題に直面する可能性が高くなります。

別のアプローチを提案する場合は、Canvas 要素をエンジンとして使用して、三角形を描画したり、クリップしたりできます。これは、現在のほとんどのブラウザー (IE を含む) で機能します。

たとえば、次のコードを使用すると、次のようになります。

ここに画像の説明を入力

要素は他の要素として使用できるようになり、オーバーレイとして使用する必要がある場合は透明になります。

プロセスは簡単です - ポリゴン ポイントを配列と色として取得する汎用関数:

function drawPolygon(points, color) {
    ctx.beginPath();
    ctx.moveTo(points[0], points[1]);
    for(var i = 2; i < polygon.length; i+=2)
        ctx.lineTo(points[i], points[i+1]);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
}

ここで行う必要があるのは、外側の三角形を 1 回呼び出し、複合モードを変更して、次の描画で「穴をあける」ことだけです。

/// draw first red triangle
drawPolygon(polygon, '#f00');

/// composite mode to clear the first drawing with the next
ctx.globalCompositeOperation = 'destination-out';

/// a smaller triangle will make the hole (color not important here)
drawPolygon(polygon2, '#00f');

ONLINE DEMO

キャンバスを別の要素の背景画像として設定することもできます:

divId.style.backgroundImage = canvas.toDataURL();

私はデモでeasyCanvasJSを使用していますが、これが機能するために必要ではありません (ここではキャンバスのセットアップなどに使用されています)。

于 2013-07-24T01:22:42.033 に答える