(翻訳)CSS と SVG でのクリッピング ? Clip-path プロパティと <clipPath> Element_html/css

CSS と SVG は多くの点で似ていますが、現在、CSS の多くの部分は SVG から来ており、その 1 つはクリッピング操作です。 CSS と SVG の両方を使用すると、要素をクリップして特定の不規則な形状に変更できます。

この記事の例は、お使いのブラウザーでは動作しない可能性があることに注意してください。したがって、この互換性レポートを確認してください。

クリッピングとは何ですか?

クリッピングは、要素の画像を完全または部分的に非表示にする操作です。クリップされる要素は、任意のコンテナーまたは画像要素にすることができます。要素の表示部分または非表示部分は、クリッピングパスによって決まります。

例: エフェクト

svg ファイル

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="background-color: white;"     width="1500px" height="800px" viewBox="0 0 1500 400" enable-background="new 0 0 1500 800" xml:space="preserve"><image overflow="visible" width="800" height="500" xlink:href="your image" transform="matrix(0.5532 0 0 0.5532 56.1025 62.7842)"></image><g>    <defs>        <path id="SVGID_1_" d="M1167.578,93.518c23.562-5.852,53.741-8.445,53.741-8.445s62.447-5.133,77.539,2.303            c36.88,18.17,83.217,61.54,101.34,81.379c19.146,20.961,22.49,58.347,17.657,79.559c-8.793,38.584-104.193,61.551-143.38,67.075            c-41.948,5.916-159.901-0.019-191.348-28.405c-21.392-19.311-9.722-104.656-0.767-132.048            C1095.412,115.014,1144.917,99.146,1167.578,93.518z"/>    </defs>    <clipPath id="SVGID_2_">        <use xlink:href="#SVGID_1_"  overflow="visible"/>    </clipPath>    <g clip-path="url(#SVGID_2_)">        <defs>            <rect id="SVGID_3_" x="1019" y="62" width="441" height="276"/>        </defs>        <clipPath id="SVGID_4_">            <use xlink:href="#SVGID_3_"  overflow="visible"/>        </clipPath>        <g transform="matrix(1 0 0 1 0 -3.814697e-006)" clip-path="url(#SVGID_4_)">                            <image overflow="visible" width="800" height="500" xlink:href="your image" transform="matrix(0.5519 0 0 0.5519 1019.1992 61.7114)">            </image>        </g>    </g></g><g>    <path fill="none" stroke="#000000" stroke-width="1.7043" stroke-miterlimit="10" stroke-dasharray="8.5114,8.5114" d="        M692.578,94.518c23.562-5.852,53.741-8.445,53.741-8.445s62.447-5.133,77.539,2.303c36.88,18.171,83.217,61.54,101.34,81.379        c19.146,20.961,22.49,58.348,17.657,79.56c-8.793,38.584-104.193,61.551-143.38,67.075c-41.948,5.916-159.901-0.019-191.348-28.405        c-21.392-19.311-9.722-104.656-0.767-132.048C620.412,116.014,669.917,100.146,692.578,94.518z"/></g><g id="layer1" transform="translate(-166.9787,-302.08511)">    <path id="path3009" d="M961.748,396.576c2.535-0.148,4.486-2.119,4.352-4.407c-0.133-2.287-2.299-4.016-4.836-3.867l-3.251,0.127        c-2.903,0.171-5.362-0.773-5.827-2.162c-0.082-0.266-0.063-0.519-0.045-0.791c0.297-1.433,2.631-2.656,5.535-2.827l3.243-0.252        c2.536-0.148,4.487-2.119,4.352-4.406c-0.133-2.288-2.299-4.016-4.837-3.868c-2.534,0.149-4.472,2.119-4.339,4.405        c0.063,1.035,0.535,1.956,1.271,2.64c-3.787,0.26-7.001,1.457-8.549,3.016l-16.073-5.058c-4.482-0.77-5.166,1.773-5.31,1.996        L944,386.349l-15.844,7.123c0.171,0.204,1.145,2.649,5.508,1.362l15.373-6.895c1.72,1.367,5.049,2.181,8.841,1.997        c-0.651,0.766-1.014,1.735-0.953,2.771C957.057,394.994,959.212,396.724,961.748,396.576z M961.73,395.4        c-1.79,0.105-3.318-1.231-3.409-2.775c-0.091-1.543,0.987-3.218,2.779-3.322c1.792-0.105,3.613,1.4,3.704,2.943        C964.893,393.789,963.52,395.295,961.73,395.4z M960.64,381.423c-1.792,0.104-3.06-1.433-3.15-2.977        c-0.088-1.542,1.272-3.048,3.063-3.152c1.791-0.105,3.33,1.229,3.422,2.774C964.065,379.611,962.43,381.318,960.64,381.423        L960.64,381.423z"/></g><text transform="matrix(1 0 0 1 222.7568 432.0273)" font-family="'Angelina'" font-size="40">Object</text><text transform="matrix(1 0 0 1 701.3027 432.0273)" font-family="'Angelina'" font-size="40">Clipping Path</text><text transform="matrix(1 0 0 1 1151.085 432.0273)" font-family="'Angelina'" font-size="40">Clipped Object</text><text transform="matrix(1 0 0 1 517.3511 237.4595)" font-family="'LaoUI'" font-size="80">+</text><text transform="matrix(1 0 0 1 978.2168 237.4595)" font-family="'LaoUI'" font-size="80">=</text></svg>

ログイン後にコピー

画像を使用する前に、そのパスを変更する必要があることに注意してください。元のパスはbase64で長すぎたので削除しました。

クリッピングパスは領域を制限し、この領域内の画像が表示され、その領域外の画像は表示されません。この領域はクリッピング領域と呼ばれます。

より正確には、コンテンツ、背景、境界線、テキスト装飾、アウトライン、クリッピングパスで使用される表示スクロールメカニズムを含む、この領域外の要素の部分はレンダリングされません。

これらは子孫要素でもレンダリングされません。

CSS でのクリッピング ? クリップパスプロパティ

clip-path は css マスキングモジュール (CSS マスキングモジュール) の一部であり、クリッピング操作は 2000 年以降 svg の一部となっており、クリッピング操作はcss マスクモジュール。マスクモジュールでは、svg 要素と同じ方法で html 要素をクリップできます。

clip-path 属性は、要素に適用されるクリッピングパスを指定するために使用されます。clip-path を使用すると、SVG でパスの属性値を指定できます。

CSS Shapes モジュールで基本シェイプ (

基本シェイプ) を指定することで、トリミングパスを制限することもできます。

これらの形状は、polygon()、circle()、inset()、ellipse() などの

shape 関数 を使用して作成できます

クリップパスを使用して要素にトリムパスを適用するのは、非常にシンプルで簡単です。

/* Referencing an SVG clipPath */.element {    clip-path: url(#svgClipPathID);} /* Using a CSS basic shape function */.element {    clip-path: polygon(...); /* or one of the other shape functions */}

ログイン後にコピー

たとえば、polygon() を使用してポリゴンのトリミングパスを制限し、それを画像に適用します。コードは次のとおりです:

img {    clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);}

ログイン後にコピー

効果: ライブデモ

基本的なシェイプ関数では限られた数のシェイプしか作成できません。これらのシェイプの中で最も複雑なものはポリゴンです。

より複雑な形状を作成したい場合は、SVG 要素を使用できます。 SVG を使用すると、任意の形状を作成し、それをクリッピングパスとして使用できます。

例:

<svg height="0" width="0">    <defs>        <clipPath id="svgPath">            <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>        </clipPath>    </defs></svg>

ログイン後にコピー

クリッピングパス:

画像にSVG を適用します

img {    clip-path: url(#svgPath);}

ログイン後にコピー

効果: ライブデモ

< ;clipPath> には、任意の数の基本的なパスを含めることができます。形状 (、など)、、さらには。

をのクリッピングパスとして使用します。最良の点は、テキストでフォントファミリを指定できることです。

テキストの幅を組み合わせるために textLength を設定します。画像の幅を一貫して設定します。の x、y 座標を使用します。

ここでの x 座標と y 座標は、テキストの左下隅を原点に基づいていることに注意してください。

効果: ライブデモ

以下では、に複数の基本的なシェイプを含めます。

<svg height="0" width="0">    <defs>        <clipPath id="svgTextPath">            <text x="0" y="300" textLength="800px" lengthAdjust="spacing" font-family="Vollkorn" font-size="230px" font-weight="700" font-style="italic"> Blossom </text>        </clipPath>    </defs></svg>

ログイン後にコピー

効果: ライブデモ

(終了)

Flash に詳しい方なら、これが Flash のマスクであることがわかるでしょう。

QQ スペースのダイナミックアルバム内の写真の切り替え効果にはマスクが使用されます。

スイッチング効果は単純に非常に眩しく、多くの変化があります。 QQスペースには21種類のエフェクトがあります。

いわゆるマスクをランダムに付けますが、誰もが瞬時にそれを理解します。

これは明らかに、js アニメーションライブラリを使用するよりもはるかにシンプルで簡単です。

前述の不規則なマスクを作成するための SVG の使用は、新しいアイデアを提供します。 svg とそのパラメータを動的に変更して、同様のアニメーション効果を実現できます。

さらに、HTML5 キャンバスにも同様の効果があります。私は非常に優れた html5 ライブラリイーゼル js を使用しました。

Nima、彼の公式 Web サイトは頻繁に利用できなくなりますが、github にあります https://github.com/CreateJS/EaselJS

Effect