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

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 5aba456969ac84efddd3a044d2e34e38 要素を使用できます。 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 5aba456969ac84efddd3a044d2e34e38を適用します

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

効果: ライブデモ

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

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

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

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

効果: ライブデモ

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

<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