> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Gradien Radial SVG: Geser Sorotan dengan fx dan fy

> Geser sorotan gradien radial SVG dengan fx dan fy, bandingkan pewarnaan lingkaran dan elips, serta pertahankan kontur lambang dan bukaan transparannya.

Source: https://perfectvector.com/id/blog/svg-radial-gradient-focus

Language: id
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) menjelaskan atribut dan nilai bawaan tersebut.

Anggap kedua pengeditan sebagai pekerjaan berbeda:

| Perubahan yang diinginkan                             | Edit                                                     | Pertahankan tetap saat membandingkan      |
| ----------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------- |
| Menggeser area paling terang ke kiri atas             | `fx` dan `fy`                                            | Koordinat lingkaran akhir, stop, dan path |
| Memindahkan seluruh wilayah pewarnaan                 | `cx` dan `cy`, dengan koordinat fokus eksplisit ditinjau | Path                                      |
| Mengubah jangkauan pewarnaan                          | `r`                                                      | Pusat, fokus, dan path                    |
| Menjaga wilayah pewarnaan melingkar pada bentuk lebar | Pilih koordinat ruang pengguna                           | Tinjau semua nilai koordinat dan radius   |

Koordinat fokus horizontal adalah [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx); yang vertikal adalah [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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
<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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) 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:

```text
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:

```svg
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](https://perfectvector.com/id/blog/svg-gradient-units).

## 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:

| Definisi pewarnaan          | Fokus    | Sampel RGBA kiri atas | Alfa bukaan |
| --------------------------- | -------- | --------------------- | ----------- |
| Batas objek, radius `.6`    | Terpusat | `164, 77, 84, 255`    | `0`         |
| Batas objek, radius `.6`    | Bergeser | `246, 184, 155, 255`  | `0`         |
| Ruang pengguna, radius `64` | Terpusat | `149, 67, 82, 255`    | `0`         |
| Ruang pengguna, radius `64` | Bergeser | `248, 196, 168, 255`  | `0`         |

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**

![Ilustrasi konseptual yang membandingkan posisi sorotan pada lambang dan menampilkan panduan batas pewarnaan.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp)

*Ilustrasi: sorotan dapat berpindah di dalam kontur yang tidak berubah. Garis panduan menjelaskan geometri pewarnaan; ini bukan spesimen peramban atau hasil penjiplakan.*

## 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](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) 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](https://perfectvector.com/id/blog/why-svg-colors-change-after-export). 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](https://perfectvector.com/id/vectorize-logo) 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](https://perfectvector.com/id/blog/vectorize-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — Atribut lingkaran awal/akhir dan nilai bawaannya.
2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — Makna koordinat fokus horizontal.
3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — Makna koordinat fokus vertikal.
4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Perilaku fill genap-ganjil untuk bukaan.
5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Batas objek, ruang pengguna, dan pemetaan elips.
6. [Gradien radial SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — Geometri lingkaran awal dan perubahan spesifikasi fokus luar.
7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — Perilaku pad, repeat, dan reflect.

## Explore

- [Read the HTML article](https://perfectvector.com/id/blog/svg-radial-gradient-focus)
- [Gradien SVG Sepanjang Path: Periksa Warna di Tikungan](https://perfectvector.com/id/blog/svg-gradient-curved-stroke.md)
- [SVG feColorMatrix: Warnai Ulang Tanpa Mengubah Fill](https://perfectvector.com/id/blog/svg-fecolormatrix.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)