SVG dalam CSS

CSS Penapis SVG Inline: Petua pemprosesan imej yang kuat

Artikel "Saya Belajar Hari Ini" (TIL) oleh Stefan Judis menerangkan bagaimana untuk menapis penapis SVG dalam CSS. Atribut filter CSS menyokong beberapa fungsi terbina dalam, seperti grayscale(100%) , dan lain-lain tetapi ia juga boleh menunjuk kepada penapis yang ditakrifkan oleh SVG. Anda boleh menggunakan filter: url(#my-custom-filter) di mana penapis ditakrifkan dalam talian<svg></svg> Dalam elemen, seperti<filter></filter> Sebahagian elemen. Kaedah ini memerlukan rujukan kepada HTML, yang agak kekok. Penapis adalah kesan visual yang lebih logik untuk disatukan ke dalam CSS. Contohnya adalah seperti berikut:

 img {
  Penapis: URL ('Data: Imej/SVG XML, \
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter color-interpolation-filters="linearRGB" filterunits="objectBoundingBox" height="140%" primitiveunits="userSpaceOnUse" width="140%" x="-20%" y="-20%"> \
        <feturbulence basefrequency="0.01 0.01" numoctaves="1" result="turbulence" seed="1" stitchtiles="noStitch" type="turbulence"></feturbulence> \
        <fedisplacementmap in="SourceGraphic" in2="turbulence" result="displacementMap" scale="20" xchannelselector="G" ychannelselector="A"></fedisplacementmap> \
      </filter>\
    </svg>#waves ')
  ;
}

Ini adalah contoh penapis pergolakan Stefan, yang tidak mungkin dengan CSS sahaja.

Sila ambil perhatian sejumlah besar backslashes ( \ ). Ini menjadikan satu harapan bahawa CSS juga boleh menyokong literals templat. Pada masa yang sama, ia juga menyangkut sama ada alat pemformatan kod atau alat pemampatan akan mengendalikan backslash ini, tetapi pada hakikatnya, ini mungkin tidak menyebabkan sebarang masalah.

Syukurlah, kod SVG mengekalkan kebolehbacaan dan editabiliti yang baik. Oleh itu, anda boleh mengedit penapis SVG secara langsung dalam CSS dan eksperimen.

Begitu juga dengan alat Yoksel. Editornya untuk imej dua dan tiga warna sangat sejuk. Anda juga boleh menggunakan penapis ini terus ke CSS.

Walau bagaimanapun, SVG yang digariskan ke CSS tidak terhad kepada penapis. Anda juga boleh membenamkan lukisan SVG terus ke CSS.

Kaedah ini berfungsi dengan baik dalam pelayar moden (kecuali safari). Tetapi dalam masa terdekat, kita perlu menyandarkan watak -watak khas dalam SVG lebih banyak untuk menjadikannya berfungsi (walaupun pengekodan Base64 tidak diperlukan). Pengekod URL Yoskel direka untuk ini, tetapi saya tidak tahu sama ada ia masih perlu sekarang.

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