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

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

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

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

การไล่สีรัศมีมีวงกลมเริ่มและวงกลมปลาย ตัวอย่างนี้ fr="0" ลดวงเริ่มเป็นจุด fx กับ fy วางจุดนั้น ส่วน cx, cy และ r นิยามวงปลาย หากไม่ตั้งพิกัดโฟกัส จะใช้ค่าพิกัดกลางที่ตรงกันเป็นค่าเริ่มต้น เอกสาร radialGradient ของ MDN อธิบายแอตทริบิวต์และค่าเริ่มต้น

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

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

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

บันทึกเป็น emblem.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 อธิบายกฎตัดผ่านที่เส้นประกอบนี้ใช้

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

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

เมื่อใช้ gradientUnits="objectBoundingBox" พิกัดอธิบายขอบเขตวัตถุที่ระบายสี ตราของเรามีขอบเขต 160 × 80 แม้พื้นที่ SVG เป็น 200 × 120 วงกลมในพิกัดมาตรฐานจะแมปผ่านกรอบไม่จัตุรัสนั้นเป็นวงรี เอกสาร gradientUnits ของ MDN อธิบายการแมปนี้

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

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

หากต้องการพื้นที่ปลายเป็นวงกลมใน 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

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

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

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

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

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

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

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

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

คง spreadMethod="pad" ระหว่างตรวจตำแหน่ง นอกขอบเขตไล่สี pad ใช้สีจุดสุดท้าย ส่วน repeat และ reflect เพิ่มการทำซ้ำที่อาจบดบังการเทียบโฟกัส เอกสาร spreadMethod ของ MDN นิยามตัวเลือก

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

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

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล

1. MDN radialGradient — แอตทริบิวต์วงเริ่ม/ปลายและค่าเริ่มต้น
2. MDN fx — ความหมายพิกัดโฟกัสแนวนอน
3. MDN fy — ความหมายพิกัดโฟกัสแนวตั้ง
4. MDN fill-rule — พฤติกรรมเติมแบบคู่คี่สำหรับช่อง
5. MDN gradientUnits — ขอบเขตวัตถุ พื้นที่ผู้ใช้ และการแมปวงรี
6. ไล่สีรัศมี SVG 2 — รูปทรงวงเริ่มและการเปลี่ยนข้อกำหนดโฟกัสภายนอก
7. MDN spreadMethod — พฤติกรรม pad, repeat และ reflect