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

# ไล่สีรัศมี SVG: ย้ายจุดสว่างด้วย fx และ fy

> ย้ายจุดสว่างของการไล่สีรัศมี SVG ด้วย fx และ fy เทียบสีวงกลมกับวงรี โดยเก็บเส้นขอบและช่องโปร่งใสของตราเหมือนเดิม

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

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

หากต้องการย้ายจุดสว่างของการไล่สีรัศมี SVG โดยไม่ย้ายภาพ ให้ตั้ง `fx` และ `fy` บน `<radialGradient>` คง `cx`, `cy`, `r` และเส้นไว้เหมือนเดิม เมื่อใช้ `fr="0"` จุดโฟกัสเริ่มการเปลี่ยนสี ส่วนวงกลมปลายยังควบคุมขอบเขตนอก หากจุดสว่างดูยืด ให้ตรวจ `gradientUnits` กับกรอบขอบเขตรูปก่อนแก้เส้นขอบ

คู่มือนี้ใช้ตราหกเหลี่ยมกว้างต้นฉบับที่มีช่อง เราเทียบจุดสว่างกลางกับเยื้อง แล้วเทียบนิยามสีสองแบบที่เลือก คือวงรีอิงวัตถุและวงกลมในพื้นที่ผู้ใช้ SVG เขียนเป็นโค้ดโดยตรง ไม่มีบริการลอกลายหรือโปรแกรมแก้ไขสร้างตัวอย่าง

## แยกโฟกัสจากวงกลมปลาย

การไล่สีรัศมีมีวงกลมเริ่มและวงกลมปลาย ตัวอย่างนี้ `fr="0"` ลดวงเริ่มเป็นจุด `fx` กับ `fy` วางจุดนั้น ส่วน `cx`, `cy` และ `r` นิยามวงปลาย หากไม่ตั้งพิกัดโฟกัส จะใช้ค่าพิกัดกลางที่ตรงกันเป็นค่าเริ่มต้น [เอกสาร radialGradient ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) อธิบายแอตทริบิวต์และค่าเริ่มต้น

มองการแก้สองแบบเป็นคนละงาน:

| สิ่งที่ต้องการเปลี่ยน           | แก้                                      | คงค่าเมื่อเปรียบเทียบ     |
| ------------------------------- | ---------------------------------------- | ------------------------- |
| ย้ายบริเวณสว่างสุดไปบนซ้าย      | `fx` และ `fy`                            | พิกัดวงปลาย จุดสี และเส้น |
| ย้ายพื้นที่ระบายทั้งหมด         | `cx` และ `cy` พร้อมตรวจพิกัดโฟกัสที่ระบุ | เส้น                      |
| เปลี่ยนระยะครอบคลุมสี           | `r`                                      | กลาง โฟกัส และเส้น        |
| ให้พื้นที่สีเป็นวงกลมบนรูปกว้าง | เลือกพิกัดพื้นที่ผู้ใช้                  | ตรวจทุกพิกัดและรัศมี      |

พิกัดโฟกัสแนวนอนคือ [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) แนวตั้งคือ [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) เปลี่ยนทั้งคู่จะย้ายจุดเริ่มในแนวทแยง ไม่เปลี่ยนจุดของเส้นหรือย้ายช่อง

## คัดลอก SVG จุดสว่างเยื้องครบชุด

บันทึกเป็น `emblem.svg` แล้วเปิดในเบราว์เซอร์ ไม่พึ่งภาพหรือสไตล์ชีตภายนอก

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

สร้างตัวควบคุมกลางโดยเปลี่ยนเฉพาะ `fx=".22" fy=".18"` เป็น `fx=".5" fy=".5"` คงแอตทริบิวต์อื่นและสองเส้นขอบใน `d` ไว้

เส้นนอกครอบคลุม `x=0` ถึง `160` และ `y=20` ถึง `100` เส้นที่สองกำหนดช่อง `fill-rule="evenodd"` เก็บช่องไม่ระบาย การย้ายไล่สีไม่เติมช่อง [เอกสาร fill-rule ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) อธิบายกฎตัดผ่านที่เส้นประกอบนี้ใช้

โฟกัสกลางอยู่ในช่อง จุดสว่างที่สุดจึงมองไม่เห็น แต่ยังเห็นการเปลี่ยนสีรอบวง โฟกัสเยื้องอยู่บนแถบทึบบนซ้าย ทำให้จุดสีสว่างสุดเห็นได้ ความต่างนี้ช่วยเมื่อแก้พิกัดแล้วดูเปลี่ยนน้อย เพราะโฟกัสอาจอยู่หลังส่วนโปร่งใสของตรา

## ทำไมตรากว้างได้การผสมสีวงรี

เมื่อใช้ `gradientUnits="objectBoundingBox"` พิกัดอธิบายขอบเขตวัตถุที่ระบายสี ตราของเรามีขอบเขต `160 × 80` แม้พื้นที่ SVG เป็น `200 × 120` วงกลมในพิกัดมาตรฐานจะแมปผ่านกรอบไม่จัตุรัสนั้นเป็นวงรี [เอกสาร gradientUnits ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) อธิบายการแมปนี้

ที่นี่ `cx=".5" cy=".5"` แมปเป็น `(80, 60)` รัศมี `.6` แมปเป็นรัศมีแนวนอนและแนวตั้ง `96` กับ `48` โฟกัสเยื้องแมปเป็น:

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

หากต้องการพื้นที่ปลายเป็นวงกลมใน SVG ที่ไม่แปลงรูปนี้ ให้แทนแอตทริบิวต์พิกัดไล่สีด้วย:

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

ตัวควบคุมกลางใช้ `fx="80" fy="60"` ตอนนี้รัศมีเป็น `64` หน่วยผู้ใช้ทั้งสองทิศ เป็นการเลือกพื้นที่ปลายต่างจากวงรี `96 × 48` เราเปลี่ยนทั้งนิยามพิกัดและรัศมีจริง การเทียบนี้จึงไม่ได้แยกเฉพาะการสลับหน่วย ภายในแต่ละคู่กลาง/เยื้อง เปลี่ยนเฉพาะพิกัดโฟกัส

ใช้สีอิงวัตถุเมื่ออยากให้การผสมตามสัดส่วนแต่ละรูป ใช้ตัวเลขพื้นที่ผู้ใช้ชัดเจนเมื่อตำแหน่งและขอบเขตวงกลมควรผูกกับพิกัดภาพ สำหรับสีไล่ร่วมกันข้ามเส้นโลโก้แยก ดู[หน่วยไล่สี SVG](https://perfectvector.com/th/blog/svg-gradient-units)

## ผลการเทียบต้นฉบับในเบราว์เซอร์

เราเปิด SVG ที่สร้างทั้งสี่ใน Chrome และแสดงแต่ละไฟล์ที่ `100 × 60` กับ `300 × 180` พิกเซล CSS เวอร์ชันใหญ่ช่วยตรวจจุดสว่างบนซ้ายง่ายขึ้น ตำแหน่งเยื้องเดียวกันยังเห็นที่ขนาดเล็ก และช่องยังโปร่งใสในทุกตัวอย่าง

รายงานต้นฉบับของเบราว์เซอร์พบหนึ่งเส้น ไม่มีองค์ประกอบภาพ ค่า `d` เหมือนกัน และขอบเขตเส้น `160 × 80` เดียวกันทั้งสี่ไฟล์ การอ่านพิกเซลแยกที่ขนาดพื้นที่ต้นฉบับยืนยันว่าสีเปลี่ยน:

| นิยามสี                  | โฟกัส  | ตัวอย่าง RGBA บนซ้าย | อัลฟาช่อง |
| ------------------------ | ------ | -------------------- | --------- |
| ขอบเขตวัตถุ รัศมี `.6`   | กลาง   | `164, 77, 84, 255`   | `0`       |
| ขอบเขตวัตถุ รัศมี `.6`   | เยื้อง | `246, 184, 155, 255` | `0`       |
| พื้นที่ผู้ใช้ รัศมี `64` | กลาง   | `149, 67, 82, 255`   | `0`       |
| พื้นที่ผู้ใช้ รัศมี `64` | เยื้อง | `248, 196, 168, 255` | `0`       |

จุดตัวอย่างบนซ้ายอยู่ที่พิกัดภาพ `(35, 30)` ส่วนช่องที่ `(80, 60)` ข้อสังเกตอธิบายต้นฉบับและเซสชันเบราว์เซอร์นี้ ไม่ยืนยันผลตัวเรนเดอร์อื่นหรือพฤติกรรมนำเข้าโปรแกรมแก้ไข

**โฟกัสและขอบเขตสี**

![ภาพแนวคิดเปรียบเทียบตำแหน่งจุดสว่างบนตราและแสดงเส้นนำขอบเขตสี](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp)

*ภาพอธิบาย: จุดสว่างย้ายภายในเส้นขอบเดิมได้ เส้นนำอธิบายรูปทรงสี ไม่ใช่ตัวอย่างเบราว์เซอร์หรือผลลอกลาย*

## คงโฟกัสด้านในขณะปรับตรา

เริ่มด้วยโฟกัสภายในและ `fr="0"` ในพิกัดมาตรฐาน ระยะจุดเยื้องจากกลางประมาณ `.425` น้อยกว่ารัศมี `.6` ของเรา ในเวอร์ชันพื้นที่ผู้ใช้ระยะประมาณ `51.6` น้อยกว่า `64` ทั้งสองแบบให้จุดเริ่มอยู่ภายในวงปลายในระบบพิกัดที่นิยามวงนั้น

คำอธิบายเก่าอาจบอกว่าโฟกัสภายนอกถูกบีบให้อยู่บนวงปลายเสมอ SVG 2 อนุญาตให้วงเริ่มอยู่ภายนอกและนิยามพฤติกรรมต่างออกไป รวมพื้นที่ไม่ระบายนอกกรวยไล่สี [ข้อกำหนดไล่สีรัศมี SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) อธิบายการเปลี่ยน ตัวอย่างนี้ใช้จุดภายใน เราไม่ได้ทดสอบโฟกัสนอกข้ามเบราว์เซอร์

คง `spreadMethod="pad"` ระหว่างตรวจตำแหน่ง นอกขอบเขตไล่สี `pad` ใช้สีจุดสุดท้าย ส่วน `repeat` และ `reflect` เพิ่มการทำซ้ำที่อาจบดบังการเทียบโฟกัส [เอกสาร spreadMethod ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) นิยามตัวเลือก

ก่อนส่งงาน ตรวจสามเรื่องในสภาพแวดล้อมที่จะแสดง SVG:

1. จุดสว่างอยู่บนแถบทึบที่ตั้งใจที่ขนาดแสดงจริง
2. ช่องยังโปร่งใสและข้อมูลเส้นตรงกับต้นฉบับหลัก
3. วงกลมหรือวงรีที่เลือกเหมาะกับสัดส่วนตรา

หากสีเปลี่ยนหลังส่งออก ให้ตรวจสีและบริบทส่งด้วย[เหตุใดสี SVG เปลี่ยนหลังส่งออก](https://perfectvector.com/th/blog/why-svg-colors-change-after-export) การย้ายโฟกัสเป็นการแก้ตำแหน่ง การเปลี่ยนสีจุดพร้อมกันทำให้เทียบยากขึ้น

## แยกการกู้รูปทรงจากออกแบบสี

เก็บต้นฉบับแบนของตรานี้ด้วยเส้นเดียวกัน สีเติมทึบ และช่องเดิม บันทึกเวอร์ชันไล่สีแยกสำหรับภาพเว็บที่ต้องใช้ การไล่สีเป็นสีที่กำหนดให้เส้นขอบ พิกัดโฟกัสเหล่านี้ไม่ได้กำหนดเส้นตัดเพิ่ม

หากโลโก้ต้นทางมีเพียง PNG หรือ JPG [เครื่องมือแปลงโลโก้ของ PerfectVector](https://perfectvector.com/th/vectorize-logo) ช่วยกู้รูปทรงเวกเตอร์มาตรวจก่อนสร้างสีนี้ใหม่ ตรวจเส้นนอกและช่อง แล้วตั้งพิกัดไล่สีในขั้นตอน SVG จุดสว่างแรสเตอร์ไม่เก็บ `fx`, `fy` หรือรัศมีเดิมเป็นพารามิเตอร์ออกแบบที่กู้คืนได้ หากมีเส้นเวกเตอร์สะอาดแล้ว ให้แก้ไล่สีโดยตรง [คู่มือแปลงไล่สีเป็นเวกเตอร์](https://perfectvector.com/th/blog/vectorize-gradients) ครอบคลุมการตัดสินแรสเตอร์เป็นเวกเตอร์

## คำถามที่พบบ่อย

**ย้ายจุดสว่างไล่สีรัศมี SVG อย่างไร?**
ตั้งพิกัด fx และ fy ชัดเจนบน radialGradient คง cx, cy, r จุดสี และเส้นเมื่อเทียบการเปลี่ยน เมื่อ fr เป็นศูนย์ พิกัดโฟกัสวางจุดเริ่มของการเปลี่ยนสี

**ทำไมไล่สีรัศมีดูเป็นวงรีใน SVG?**
เมื่อหน่วยเป็น objectBoundingBox วงกลมพิกัดมาตรฐานแมปผ่านขอบเขตวัตถุที่ระบาย กรอบไม่จัตุรัสให้วงรี ใน SVG ไม่แปลงรูป พิกัด userSpaceOnUse ชัดเจนกำหนดพื้นที่วงกลมในหน่วยภาพได้

**ย้ายโฟกัสจะเติมช่องโลโก้หรือไม่?**
ไม่ เส้นประกอบและกฎเติมสีกำหนดช่อง ตัวอย่างนี้ใช้ evenodd และคงเส้นเดิมทุกตัวอย่าง ช่องยังโปร่งใสเมื่อย้ายโฟกัส

**การแปลงเวกเตอร์กู้พิกัดโฟกัสไล่สีเดิมได้หรือไม่?**
ภาพแรสเตอร์ไม่เก็บพารามิเตอร์ไล่สี SVG เดิม กู้และตรวจเส้นขอบหากจำเป็น แล้วสร้างสีใหม่และตรวจจุดสว่างในสภาพแสดงเป้าหมาย

## แหล่งข้อมูล

1. [MDN radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — แอตทริบิวต์วงเริ่ม/ปลายและค่าเริ่มต้น
2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — ความหมายพิกัดโฟกัสแนวนอน
3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — ความหมายพิกัดโฟกัสแนวตั้ง
4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — พฤติกรรมเติมแบบคู่คี่สำหรับช่อง
5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — ขอบเขตวัตถุ พื้นที่ผู้ใช้ และการแมปวงรี
6. [ไล่สีรัศมี SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — รูปทรงวงเริ่มและการเปลี่ยนข้อกำหนดโฟกัสภายนอก
7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — พฤติกรรม pad, repeat และ reflect

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/svg-radial-gradient-focus)
- [ไล่สี SVG ตามเส้น: ตรวจสีรอบทางโค้ง](https://perfectvector.com/th/blog/svg-gradient-curved-stroke.md)
- [SVG feColorMatrix: เปลี่ยนสีโดยไม่แก้ค่าสีเติม](https://perfectvector.com/th/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)