Gradien Radial SVG: Geser Sorotan dengan fx dan fy

Untuk menggeser sorotan gradien radial SVG tanpa memindahkan gambar, tetapkan fx dan fy pada <radialGradient>. Pertahankan cx, cy, r, dan path. Dengan fr="0", titik fokus memulai perkembangan warna; lingkaran akhir tetap mengendalikan jangkauan luarnya. Jika sorotan terlihat meregang, periksa gradientUnits dan kotak pembatas bentuk sebelum mengedit kontur.

Panduan ini memakai lambang heksagonal lebar asli dengan bukaan. Kami membandingkan sorotan terpusat dan bergeser, lalu membandingkan dua definisi pewarnaan yang dipilih: elips relatif terhadap objek dan lingkaran ruang pengguna. SVG dibuat langsung sebagai kode. Tidak ada layanan penjiplakan atau editor yang menghasilkan spesimen ini.

Pisahkan fokus dari lingkaran akhir

Gradien radial memiliki lingkaran awal dan lingkaran akhir. Dalam kode awal ini, fr="0" mengecilkan lingkaran awal menjadi titik. fx dan fy menempatkan titik itu; cx, cy, dan r menentukan lingkaran akhir. Jika koordinat fokus tidak ditetapkan, nilai bawaannya mengikuti koordinat pusat yang bersesuaian. Referensi radialGradient MDN menjelaskan atribut dan nilai bawaan tersebut.

Anggap kedua pengeditan sebagai pekerjaan berbeda:

Koordinat fokus horizontal adalah fx; yang vertikal adalah fy. Mengubah keduanya memindahkan titik awal secara diagonal. Ini tidak mengubah titik path atau memindahkan bukaannya.

Salin SVG lengkap dengan sorotan bergeser

Simpan sebagai emblem.svg dan buka di peramban. Berkas tidak memiliki dependensi gambar atau stylesheet eksternal.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>

Untuk membuat kontrol terpusat, ubah hanya fx=".22" fy=".18" menjadi fx=".5" fy=".5". Biarkan atribut lain dan kedua kontur dalam d tetap sama.

Kontur luar membentang dari x=0 hingga 160 dan y=20 hingga 100. Kontur kedua menentukan bukaan. fill-rule="evenodd" menjaga bukaan itu tidak dicat; menggeser gradien tidak mengisinya. Referensi fill-rule MDN menjelaskan aturan persilangan yang dipakai path majemuk ini.

Fokus terpusat berada dalam bukaan, sehingga titik paling terang itu sendiri tidak terlihat. Anda masih melihat perkembangan warna di sekitarnya pada cincin. Fokus bergeser jatuh pada pita solid kiri atas, tempat stop paling terang menjadi terlihat. Perbedaan itu membantu saat pengeditan koordinat seolah hanya sedikit berpengaruh: fokus mungkin berada di balik bagian transparan lambang.

Mengapa lambang lebar mendapat gradasi elips

Dengan gradientUnits="objectBoundingBox", koordinat mendeskripsikan batas objek yang dicat. Batas lambang kami adalah 160 × 80, meskipun kanvas SVG-nya 200 × 120. Lingkaran ternormalisasi dipetakan melalui kotak tidak persegi itu menjadi elips. Referensi gradientUnits MDN menjelaskan pemetaan ini.

Di sini, cx=".5" cy=".5" dipetakan ke (80, 60). Radius .6 dipetakan ke radius horizontal dan vertikal 96 serta 48. Fokus bergeser dipetakan menjadi:

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

Untuk wilayah akhir melingkar dalam SVG tanpa transformasi ini, ganti atribut koordinat gradien dengan:

gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"

Kontrol terpusatnya memakai fx="80" fy="60". Radius kini 64 satuan pengguna di kedua arah. Ini wilayah akhir pilihan yang berbeda dari elips 96 × 48. Kami mengubah definisi koordinat dan radius fisiknya; perbandingan ini tidak mengisolasi perubahan opsi satuan. Dalam setiap pasangan terpusat/bergeser, hanya koordinat fokus yang berubah.

Gunakan pewarnaan relatif terhadap objek jika gradasi harus mengikuti proporsi setiap bentuk. Gunakan angka ruang pengguna eksplisit jika lokasi dan jangkauan lingkarannya termasuk dalam koordinat gambar. Untuk gradasi yang dibagi beberapa path logo terpisah, lihat satuan gradien SVG.

Hasil perbandingan peramban asli

Kami membuka keempat SVG buatan sendiri di Chrome dan menampilkan masing-masing pada 100 × 60 serta 300 × 180 piksel CSS. Versi lebih besar memudahkan pemeriksaan sorotan kiri atas. Pergeseran yang sama tetap terlihat pada ukuran lebih kecil, sementara bukaan tetap transparan dalam setiap spesimen.

Laporan sumber peramban menemukan satu path, tanpa elemen image, nilai d identik, dan batas path 160 × 80 yang sama dalam keempat berkas. Pembacaan piksel terpisah pada ukuran kanvas sumber mengonfirmasi pewarnaan yang berubah:

Sampel kiri atas berada pada koordinat gambar (35, 30); sampel bukaan pada (80, 60). Pengamatan ini mendeskripsikan sumber dan sesi peramban ini. Pengamatan tidak memastikan keluaran renderer lain atau perilaku impor editor.

Fokus dan batas pewarnaan

Jaga fokus di dalam saat menyesuaikan lambang

Mulailah dengan fokus bagian dalam dan fr="0". Dalam koordinat ternormalisasi, jarak fokus bergeser dari pusat sekitar .425, di bawah radius .6 kami. Dalam versi ruang pengguna, jaraknya sekitar 51.6, di bawah 64. Kedua pilihan menjaga titik awal di dalam lingkaran akhir pada sistem koordinat tempat lingkaran itu didefinisikan.

Penjelasan lama mungkin menyebut fokus di luar selalu dijepit ke lingkaran akhir. SVG 2 mengizinkan lingkaran awal berada di luar dan mendefinisikan perilaku berbeda, termasuk wilayah yang tidak dicat di luar kerucut gradiennya. Spesifikasi gradien radial SVG 2 menjelaskan perubahan itu. Kode awal ini memakai titik bagian dalam; kami tidak menguji rendering fokus luar lintas peramban.

Pertahankan spreadMethod="pad" saat memeriksa penempatan. Di luar jangkauan gradien, pad memakai warna stop terakhir; repeat dan reflect menambahkan perilaku berulang yang dapat mengaburkan perbandingan fokus. Referensi spreadMethod MDN mendefinisikan pilihan tersebut.

Sebelum menyerahkan, periksa tiga hal ini dalam lingkungan yang akan menampilkan SVG:

1. Sorotan berada pada pita solid yang dimaksud pada ukuran tampilan sebenarnya.
2. Bukaan tetap transparan, dan data path masih sesuai dengan master.
3. Lingkaran atau elips yang dipilih sesuai dengan proporsi lambang.

Jika warna bergeser setelah ekspor, periksa pewarnaan dan konteks penyerahan menggunakan mengapa warna SVG berubah setelah ekspor. Menggeser titik fokus merupakan pengeditan penempatan, sehingga mengubah warna stop bersamaan membuat perbandingan lebih sulit dibaca.

Pisahkan pemulihan geometri dari desain pewarnaan

Simpan master datar lambang ini dengan memakai path yang sama dan fill solid serta mempertahankan bukaannya. Simpan versi gradien secara terpisah untuk gambar web yang membutuhkannya. Gradien adalah pewarnaan yang ditetapkan pada kontur; koordinat fokus ini tidak menentukan path potong tambahan.

Jika logo awal hanya tersedia sebagai PNG atau JPG, vektorisator logo PerfectVector dapat memulihkan geometri vektor untuk diperiksa sebelum membangun ulang pewarnaan ini. Periksa kontur luar dan bukaan, lalu tetapkan koordinat gradien dalam alur SVG Anda. Sorotan raster tidak menyimpan fx, fy, atau radius aslinya sebagai parameter desain yang dapat dipulihkan. Jika kontur vektor bersih sudah ada, edit gradiennya langsung. Panduan vektorisasi gradien membahas keputusan raster-ke-vektor.

Pertanyaan umum

Bagaimana cara menggeser sorotan gradien radial SVG? Tetapkan koordinat fx dan fy eksplisit pada radialGradient. Pertahankan cx, cy, r, stop, dan path saat membandingkan perubahan. Dengan fr bernilai nol, koordinat fokus itu menempatkan titik awal perkembangan warna.

Mengapa gradien radial terlihat elips dalam SVG saya? Dengan satuan objectBoundingBox, lingkaran ternormalisasi dipetakan melalui batas objek yang dicat. Batas tidak persegi menghasilkan elips. Dalam SVG tanpa transformasi, koordinat userSpaceOnUse eksplisit dapat menentukan wilayah melingkar dalam satuan gambar.

Apakah menggeser titik fokus akan mengisi bukaan logo? Tidak. Path majemuk dan aturan fill-nya menentukan bukaan. Contoh ini memakai evenodd dan mempertahankan path yang sama dalam setiap spesimen; bukaannya tetap transparan saat fokus bergeser.

Bisakah vektorisasi memulihkan koordinat fokus gradien asli? Gambar raster tidak menyimpan parameter gradien SVG asli. Pulihkan dan periksa kontur jika perlu, lalu bangun ulang pewarnaan dan periksa sorotan dalam lingkungan tampilan yang dimaksud.

Sumber

1. MDN radialGradient — Atribut lingkaran awal/akhir dan nilai bawaannya.
2. MDN fx — Makna koordinat fokus horizontal.
3. MDN fy — Makna koordinat fokus vertikal.
4. MDN fill-rule — Perilaku fill genap-ganjil untuk bukaan.
5. MDN gradientUnits — Batas objek, ruang pengguna, dan pemetaan elips.
6. Gradien radial SVG 2 — Geometri lingkaran awal dan perubahan spesifikasi fokus luar.
7. MDN spreadMethod — Perilaku pad, repeat, dan reflect.