Rumah > Artikel > hujung hadapan web > Bagaimana untuk Memohon Kecerunan Linear pada Elemen Rect SVG Menggunakan CSS?
Menggunakan Kecerunan Linear pada Elemen Rect SVG Menggunakan CSS
Dalam usaha untuk meningkatkan visual, pembangun sering berusaha untuk menggunakan kecerunan linear pada SVG rect elemen. Soalan ini mendalami teknik menggunakan CSS untuk mencapai kecerunan tersebut.
Pendekatan CSS
Untuk menggunakan kecerunan linear pada elemen tegak SVG melalui CSS, manfaatkan pengisian atribut seperti yang anda lakukan dalam atribut isian mana-mana elemen lain. Adalah penting untuk mentakrifkan kecerunan linear dalam SVG itu sendiri.
Pertimbangkan contoh ini:
<code class="css">rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); }</code>
<code class="html"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> rect{fill:url(#MyGradient)} </style> <defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient> </defs> <rect width="100" height="50"/> </svg></code>
Kod ini mentakrifkan kecerunan linear dalam
Atas ialah kandungan terperinci Bagaimana untuk Memohon Kecerunan Linear pada Elemen Rect SVG Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!