A Comprehensive Guide to Clipping and Masking in SVG

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Clipping dan masking adalah fitur SVG yang memiliki kemampuan untuk menyembunyikan sebagian atau sebagian objek melalui penggunaan bentuk yang sederhana atau kompleks. Selama bertahun-tahun banyak pengembang telah mengambil kemampuan ini dan mendorong mereka ke berbagai arah. Dalam artikel ini, kita akan melihat beberapa metode canggih bersama dengan demo yang menampilkan kliping dan masking yang sangat efektif. Mari kita mulai!

Apa adalah kliping? Apa adalah Masking?

Mari kita menjawab pertanyaan ini pertama: what is the perbedaan antara clipping dan masking? Kita akan melihat ke dalam masing-masing untuk mendapatkan pemahaman yang lebih baik. Perlu diketahui bahwa sementara fitur yang paling diuraikan dalam spesifikasi pekerjaan hari ini, beberapa tidak akan. Selalu periksa caniuse serta Anda sendiri tes di browser.

Clipping

Clipping path adalah objek tempat segala sesuatu dalam bentuk yang ditentukan terlihat, sedangkan bagian luarnya "clipped out" dan tidak muncul di kanvas

Dalam contoh gambar di atas, kami bentuk (Envato logo) adalah objek yang kita akan menggunakan sebagai obyek path klip kami. Hasilnya adalah memotong keluar dari latar belakang solid yang meninggalkan hanya bentuk yang keras dalam bentuk kami "clipping region".

Masking

Di sini kita mengambil objek grafis atau bentuk yang akan dicat ke latar belakang melalui topeng, sehingga benar-benar atau sebagian masking keluar bagian dari objek.

the effect of a mask — Tidak ada hubungannya dengan Jim Carey

Pikirkan masker sebagai cara untuk menerima wilayah terlihat yang sudah ditentukan oleh bentuk dan lokasi obyek. Dalam skenario ini masker kami adalah objek yang kita inginkan untuk "mengambil" dari kami padat warna latar belakang. Hasilnya adalah sebuah bentuk yang identik dengan topeng kami (yaitu padat hitam bentuk).

Distinction

Masih bingung perbedaan? Ada perbedaan yang sangat halus antara dua jenis pilihan. Pikirkan clipping path sebagai "hard mask" di mana objek clipping dihapus adalah bentuk tanpa piksel transparan atau buram yang ditampilkan. Masker terdiri dari bentuk atau gambar yang mana setiap pixel memiliki berbagai tingkat transparansi dan kegelapan yang bisa mengintip melalui, atau menyembunyikan bagian dalam cara yang sangat halus.

Sekarang mari kita bahas beberapa elemen dan atribut yang memungkinkan clipping dan masking di SVG.

clipPath

ClipPath SVG menerima banyak atribut dan jenis konten model. Jenis konten model yang diterima adalah yang seperti judul dan deskripsi bersama dengan jenis lain dari tag meta data. Ini juga menerima SMIL animasi Tag seperti <animate>, <animateTransform>, SVG bentuk (lingkaran, rect, polypon, path) termasuk <text>, <use>, style, dan <script>. Anda bahkan dapat memiliki beberapa definisi clipPath di dalam clipPath orang tua.

Berikut adalah potongan menggunakan meta tag, SMIL dan SVG bentuk:

<svg viewBox="0 0 100 100" xmlns="https://www.w3.org/2000/svg" version="1.1">
<defs>
        <clipPath id="my-clip">
            <title>My Clip Path</title>
            <desc>an svg rectangle using a circle as the clipping target and animated with SMIL</desc>
            <rect x="0" y="0" width="200" height="600">
            <animate attributeType="XML"
                     attributeName="x"
                     from=“-200"
                     to=“400"
                     dur="5s"
                     repeatCount="indefinite"/>
            </rect>
        </clipPath>
    </defs>

    <circle clip-path="url(#my-clip)" width="200" height="200" cx="50" r="50" cy="50" fill="green" />
</svg>

ClipPath yang dibuat dalam SVG juga dapat direferensikan dari CSS menggunakan properti clip-path seperti ini:

.element {
clip-path: url("#my-clip");
}

Di sini saya referensi klip dari potongan SVG kami sebelumnya dengan fungsi url(), dan melewati nilai id dari clipPath kami. Ada juga pilihan untuk menggunakan citra sebagai target dari clipPath:

<svg viewBox="0 0 200 300">
<defs>
        <clipPath id="clip">
            <style>
            circle {
                fill: black;
            }
            </style>
            <circle cx="100" cy="100" r="100"/>
        </clipPath>
    </defs>

    <image height="100%" preserveAspectRatio="xMinYMin slice" width"100%" xlink:href="https://images.unsplash.com/photo-1472195870936-d88b0d4c1b41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=f1abbd4d59a9b448813cb48769806ada" clip-path="url(#clip)" />
</svg>

Gambar di potongan ini menggunakan SVG bentuk (lingkaran) sebagai objek clipping. Hasilnya adalah sebuah lingkaran dengan gambar itu; cukup mewah eh? Anda juga dapat melihat penyertaan tag style dalam clipPath. Setiap tag <style> yang ditempatkan dalam clipPath (atau mask) akan menang atas atribut yang berhubungan, dan CSS eksternal.

clipPath atribut

Ada beberapa atribut clipPath dapat menerima, dan tentu saja terlalu banyak untuk daftar. Atribut tertentu clipPath layak diskusi artikel ini adalah clipPathUnits dan clip-rule. Di sini adalah lari ke bawah menggambarkan apa masing-masing, dan cara pilih nilai yang sesuai.

clipPathUnits

Atribut ini adalah salah satu yang sangat penting karena membantu mendefinisikan "koordinat sistem" atau dengan kata lain "lokasi" isi clipPath. Itu menerima dua jenis nilai-nilai, tetapi hanya satu mungkin akan berlalu. Secara default userSpaceOnUse dipilih, dan satu Anda akan biasanya menggunakan.

nonzero: nilai ini mendefinisikan titik apakah di dalam atau di luar jalan oleh menggambar garis dari titik awal ke infinity ke segala arah, dan berhitung tempat-tempat yang mana segmen bentuk melintasi garis dalam arah tertentu. Ketika segmen melintasi garis dari kiri ke kanan, menghitung bertambah; Ketika segmen melintasi garis dari kanan ke kiri, menghitung decremented. Jika hitungan adalah nol, intinya luar; jika bukan nol, dalamnya.
evenodd: nilai ini mendefinisikan titik apakah di dalam atau di luar jalan oleh menggambar garis dari titik itu ke infinity ke segala arah dan menghitung jumlah segmen bentuk yang melintasi garis. Jika hitungan lebih aneh, intinya di dalamnya; Jika bahkan, titik berada di luar.

Mask

Mask dapat melakukan banyak hal luar biasa dengan citra, bentuk, batas, dan penempatan semua melalui penggunaan <mask>. Sementara itu mempunyai kemampuan untuk didefinisikan dalam SVG, itu juga dapat dirujuk dalam CSS dengan mask properti. Mask dapat menerima clipPath, atau mask lainnya (Halo awal). Ada berbagai jenis konten model diterima dan terdaftar secara keseluruhan dari spesifikasi W3C.

Berikut ini adalah contoh kode menggunakan bentuk SVG sebagai objek masking, dan penargetan gambar SVG inline.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
        <mask id="image-mask">
            <circle id="outer" cx="50" cy="50" r="50" fill="white"/>
            <circle id="inner" cx="50" cy="50" r="25"/>
        </mask>
    </defs>
    <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://images.unsplash.com/photo-1472195870936-d88b0d4c1b41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=f1abbd4d59a9b448813cb48769806ada" mask="url(#image-mask)"></image>
</svg>

Sampel kode ini mengakibatkan doughnut mana lingkaran dalam transparan dan tepi luar memungkinkan gambar untuk menunjukkan melalui. Ada demo lengkap pada akhir artikel ini menampilkan hasilnya.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
  	<mask id="SVGMask" mask-type="luminance" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
			<style>
			#rect {
				mask-image: url(#SVGMask);
				mask-mode: luminance;
			}
			</style>
			<radialGradient id="radialFill">
				<stop stop-color="white" offset="0"/>
				<stop stop-color="black" offset="1"/>
			</radialGradient>
			<circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
		</mask>
	</defs>
	<rect id="rect" width="100" height="100" fill="green"/>
</svg>

Berikut adalah potongan kode lain di mana saya menggunakan CSS properti sebagai gaya inline bersarang dalam mask untuk referensi objek masking, dan kontrol modus pencahayaan menggunakan luminance (intensitas cahaya yang dipancarkan dari permukaan).

mask-image

Ada beberapa cara yang penulis dapat menentukan mask dalam SVG. Yang pertama adalah melalui penggunaan SVG atribut mask="url(#id-value)" biasanya didefinisikan pada target dalam SVG Anda, dan yang lainnya adalah mask-image.

Sama seperti mask, properti mask-image menerima pengenal seperti nilai ID topeng yang digunakan dalam potongan kode di atas. Jika digunakan dalam CSS Anda dapat referensi file SVG itu sendiri melalui url fungsi mask-image: url(your-external-file.svg#the-mask-id-value).

mask-mode

Properti ini menentukan jika mask diperlakukan sebagai mask luminance, atau mask alpha. Nilai Alpha kontrol tingkat transparansi memungkinkan mask, dan nilai luminance kontrol intensitas dari cahaya yang dipancarkan. Jika Anda memutuskan untuk mendefinisikan ini sebagai atribut pada mask SVG Anda Anda dapat menggunakan atribut mask-type langsung pada SVG mask elemen, atau Anda juga dapat menggunakan mask-mode didefinisikan dalam CSS.

maskUnits

<mask maskUnits="[objectBoundingBox | userSpaceOnUse]">

Banyak seperti clipPathUnits, masker memiliki atribut yang sangat mirip. Atribut masking ini membantu menentukan sistem koordinat untuk atribut seperti x, y, lebar dan tinggi. Jika tidak ada nilai hadir nilai objectBoundingBox digunakan secara default.

userSpaceOnUse: pengguna sistem koordinat untuk referensi elemen <mask>
objectBoundingBox: Bounding box dapat dianggap sama seperti jika isi <mask> terikat ke "0 0 1 1" viewbox.

maskContentUnits

<mask maskContentUnits="[objectBoundingBox | userSpaceOnUse]">

Mendefinisikan sistem koordinat untuk isi mask. Seperti maskUnits, ini juga menerima userSpaceOnUse atau objectBoundingBox sebagai nilai. Jika tidak ada nilai berlalu maka nilai userSpaceOnUse digunakan secara default.

userSpaceOnUse: pengguna sistem koordinat untuk referensi elemen <mask>
objectBoundingBox: kotak melompat-lompat dapat dianggap sama seperti jika isi <mask>terikat untuk viewbox = "0 0 1 1".

Use Cases

Ada beberapa cara yang sangat pintar Anda dapat menerapkan mask dan clip paths dalam pekerjaan Anda hari ini.

Demo 1

Berikut adalah contoh menggunakan Slack-esque pemuatan konteks di mana kami memberikan pengguna perasaan yang dirasakan loading untuk konten (memukul jalankan kembali di sudut kanan bawah untuk melihat efek).

Setelah API data yang diperoleh kita dapat mulai untuk menggelar konten. Ini adalah menggabungkan penggunaan gradien CSS, CSS animasi dan SVG clipPath. Props kepada pencipta asli Yacine yang memicu saya demo yang telah diperbarui di atas. Aku harus menunjukkan bahwa untuk pergi ke arah ini Anda akan perlu untuk menciptakan tampilan pengganti produk akhir Anda menggunakan editor SVG seperti sketsa untuk menciptakan struktur awal.

Demo 2

Berikut adalah pendekatan pintar dan artistik lain, diambil dari pena oleh Noel Delgado, menampilkan peristiwa hover dengan menggunakan SVG clipping:

Sementara ada JavaScript yang digunakan untuk mendeteksi posisi mouse, efek itu sendiri sebenarnya adalah clipPath SVG. Efek yang indah untuk bagian portofolio yang menampilkan pekerjaan, namun pastikan untuk membuat fallback untuk skenario di mana tikus tidak hadir.

Demo 3

Kadang-kadang sederhana hanya sebagai efektif sebagai kompleks. I'ma fan besar dari tipografi dan dalam contoh ini oleh Steven Sinatra masker SVG digunakan untuk membantu mengisolasi teks dan bernyawa di tempat (sekali lagi, Anda akan perlu untuk memukul tayangan ulang). Pendekatan menyenangkan yang dapat digunakan untuk bagian-bagian terkenal pahlawan.

Demo 4

Saya memilih pena ini karena ini adalah kasus penggunaan yang sangat bagus untuk mengisi ikon dalam situasi seperti peringkat atau menyukai pos / item, dan semuanya dilakukan dengan topeng SVG.

Demo 5

Awalnya dibuat oleh Dudley Storey, garpu ini oleh Shaw menggunakan topeng SVG untuk mengisolasi setiap pemain skateboard di hover. Dengan menggunakan mouse Anda, arahkan kursor ke atas masing-masing untuk melihat efeknya terjadi. Cukup keren ya?

Ingin lebih?

Bagaimana dengan sesuatu hanya untuk bersenang-senang? Poster film baru saja menjadi lebih keren berkat Chase. Contoh masker SVG yang benar-benar menyenangkan dan inventif, serta filter juga!

Saya juga membuat demo publik yang berisi contoh lebih lanjut yang menunjukkan cara menyiapkan berbagai jenis klip dan mask menggunakan kombinasi skenario, bersama dengan sampel tambahan menggunakan SMIL.

Perpisahan pikiran

Di sana Anda memilikinya; kumuh dan analisis clipping dan menutupi di SVG. Apakah Anda menggunakan jenis pendekatan dalam pekerjaan Anda hari ini? Memiliki demo kasus penggunaan yang benar-benar hebat untuk berbagi, atau hanya punya pendapat tentang hal-hal secara umum? Posting komentar di bawah ini dan bahagia coding!