SVG Properties dalam Panduan CSS

Panduan ini meneroka persimpangan CSS dan grafik vektor berskala (SVG), yang memberi tumpuan kepada elemen SVG gaya menggunakan sifat CSS. Walaupun banyak atribut SVG wujud, hanya tertentu -terutamanya atribut persembahan -boleh secara langsung digayakan dengan CSS. Sesetengah sifat CSS dikongsi dengan SVG (seperti font-size dan opacity ), sementara yang lain adalah khusus SVG.

Sebagai contoh, untuk mewarnai elemen merah, harta fill yang berfungsi dalam CSS kerana fill adalah atribut persembahan:

 bulatan {
  Isi: merah;
}

Panduan ini secara komprehensif butir -butir SVG yang tersedia dan sifat CSS yang sepadan, yang meliputi pelbagai teknik gaya termasuk gaya umum dan animasi.

Elemen SVG dan CSS Properties: Gambaran Keseluruhan yang Dikategorikan

Menggariskan atribut persembahan berikut yang boleh digunakan sebagai sifat CSS, dikategorikan untuk kejelasan. Unsur -unsur yang tidak dikecualikan dikecualikan.

CSS dan SVG Shared Properties

Sifat fon

Sifat teks

Sifat masking

Sifat interaktiviti

Sifat warna

Sifat penglihatan

SVG Specific CSS Properties

Sifat teks

Sifat klip

Sifat masking

Kesan penapis

Sifat kecerunan

Sifat interaktiviti

Sifat warna

Lukisan sifat

SVG 2 dan CSS Styling

Walaupun atribut persembahan menjembatani jurang antara CSS dan SVG Styling, SVG 2 (kini dalam cadangan calon) dengan ketara meningkatkan interaksi ini, yang membolehkan kawalan ke atas koordinat elemen dan dimensi menggunakan CSS.

Spesifikasi SVG 2 menjelaskan:

"Sesetengah sifat gaya boleh ditentukan bukan sahaja dalam helaian gaya dan 'gaya', tetapi juga dalam atribut persembahan.

Ini bermakna CSS, termasuk kelas pseudo seperti :hover dan :active , boleh gaya SVG sifat melalui atribut persembahan atau stylesheets. SVG 2 juga memperkenalkan atribut persembahan tambahan untuk gaya. Rujuk spesifikasi SVG 2 untuk senarai lengkap.

Sokongan Harta Khusus Elemen

Adalah penting untuk diingat bahawa sokongan harta CSS berbeza -beza di seluruh elemen SVG. Ciri-ciri tertentu adalah elemen khusus. Contohnya,<circle></circle> dan<ellipse></ellipse> Sokongan cx , cy , rx , dan ry , tetapi unsur -unsur lain mungkin tidak.

Sifat geometri

SVG 2 mentakrifkan sifat -sifat seperti rx dan ry sebagai sifat geometri, yang digerakkan dengan CSS bersama atribut persembahan seperti fill atau stroke .

Kedudukan elemen SVG dengan CSS (SVG 2)

SVG 2 membolehkan kedudukan berasaskan CSS. Pertimbangkan segi empat tepat:

<svg height="170" width="170"><rect height="150" width="150" x="10" y="10"></rect></svg>

Dengan SVG 2, atribut x dan y boleh dikawal melalui CSS:

 / * Bekerja dengan SVG 2 */
rect {
  x: 10;
  Y: 10;
  / * ... gaya lain ... */
}

Memudahkan markup SVG ke:

<svg height="170" width="170"><rect height="150" width="150"></rect></svg>

Begitu juga, width dan height boleh ditetapkan menggunakan CSS, meminimumkan kod SVG selanjutnya.

Pada masa ini, pelayar Blink (Chrome, Opera) dan WebKit (Safari) menawarkan sokongan yang lebih baik untuk ciri -ciri SVG 2 ini. Untuk keserasian yang lebih luas, teknik alternatif diperlukan.

Bentuk svg morphing dengan css

CSS boleh digunakan untuk menghasilkan kesan morphing. Laluan SVG yang terlibat mestilah mempunyai arahan yang sama dan bilangan mata yang sama untuk morphing yang berjaya.

Contoh: Morphing segitiga ke dalam persegi.

<svg height="220" width="300"><path d="M150 10 L40 200 L260 200Z"></path></svg>

CSS untuk mengatasi jalan:

 jalan {
  D: Path ("M150, 10 L40, 200 L260, 200Z"); / * Bentuk awal */
  Isi: #4C6EdB;
}

jalan: aktif {
  D: Path ("M10,10 L160,10 L160,160 L10,160 Z"); / * Bentuk morphed */
  Isi: #4C6EdB;
  Peralihan: Semua 0.35s mudah;
}

Markup SVG memudahkan:

<svg height="220" width="300"><path></path></svg>

Animasi SVG Properties dengan CSS

Animasi dan peralihan CSS menghidupkan sifat SVG. Contoh ini menunjukkan animasi gelombang dengan lima kalangan:

<svg height="250" width="350"><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle></svg>

CSS dengan pembolehubah dan :nth-child() untuk gaya dan animasi:

 / * ... CSS untuk warna dan gaya bulatan awal ... */

.shape {
  / * ... gaya awal ... */
  Animasi: MoveCircle 1250ms mudah-dalam-keluar kedua-dua tak terhingga;
}

/ * ... animasi-delay untuk setiap bulatan ... */

@KeyFrames MoveCircle {
  50% {
    Cy: 150;
    R: 13;
  }
}

Animasi dalam<pattern></pattern> Unsur -unsur juga mungkin.

Kesimpulan

Walaupun SVG 2 menawarkan keupayaan gaya CSS yang kuat, sokongan penyemak imbas yang meluas masih berkembang. Untuk kegunaan pengeluaran, pertimbangkan keserasian dengan teliti. Sebagai SVG 2 matang, gaya CSS sifat geometri SVG akan menjadi semakin mantap dan boleh dipercayai.

Atas ialah kandungan terperinci SVG Properties dalam Panduan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!