หน่วยไล่สี SVG: ใช้การไล่สีเดียวร่วมกันทั่วพาธโลโก้

หากต้องการกระจายการไล่สีเดียวทั่วพาธ SVG ที่แยกกัน ให้ใช้ gradientUnits="userSpaceOnUse" กำหนดปลายในพิกัดงานภาพ และให้พาธอยู่ในระบบพิกัดเดียวกัน แต่ละพาธจะเผยส่วนของการไล่สีตามตำแหน่งของมัน คุณยังเก็บชิ้นส่วนโลโก้ให้แก้แยกกันได้

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

คู่มือนี้ใช้ตราสัญลักษณ์สามส่วนที่วาดเป็นพาธ SVG โดยตรง หากมีโลโก้เวกเตอร์อยู่แล้ว ให้ทำจากไฟล์หลักนั้น ต้นฉบับที่มีเพียงราสเตอร์ต้องกู้คืนรูปทรงก่อนขั้นตอนแก้สีนี้ คู่มือแปลงภาพไล่สีเป็นเวกเตอร์ ที่กว้างขึ้นอธิบายทางเลือกนั้น

ตัดสินใจว่าการไล่สีเป็นของแต่ละรูปทรงหรือทั้งเครื่องหมาย

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

การใส่ fill="url(#brandBlend)" บนกลุ่มส่งต่อสีเติมให้องค์ประกอบย่อย ไม่ได้ทำให้การไล่สีแบบกรอบครอบวัดรูปเงารวมของกลุ่ม องค์ประกอบย่อยยังได้รับสีวาดของตัวเอง ข้อกำหนดแหล่งสี SVG อธิบายการไล่สีเป็นทรัพยากรที่ fill หรือ stroke ขององค์ประกอบอ้างอิง

ตราสัญลักษณ์เดียวกับการเลือกพิกัดสี่แบบ

กำหนดปลายให้ครอบคลุมงานภาพ

พาธในตัวอย่างอยู่ในตำแหน่งแนวนอนตั้งแต่ x=30 ถึง x=310 นั่นคือปลายการไล่สี สามเหลี่ยมสิ้นสุดที่ x=125 บล็อกกลางอยู่ระหว่าง 140 ถึง 210 และรูปด้านขวาอยู่ตั้งแต่ 225 ถึง 310

บันทึกเป็น shared-logo.svg แล้วเปิดในเบราว์เซอร์:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

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

หากต้องการเปรียบเทียบกับ A โดยตรง ให้แทนแอตทริบิวต์ gradientUnits, x1, y1, x2 และ y2 ของการไล่สีด้วย x1="0%" y1="0%" x2="100%" y2="0%" การละ gradientUnits คืนค่าปริยาย แต่ละรูปทรงจึงได้รับการเปลี่ยนสีครบทั้งหมด

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

ตรวจการแปลงเมื่อชิ้นหนึ่งมีสีผิด

ใน C รูปด้านขวาดูเหมือนอยู่ที่เดิม พิกัดพาธเลื่อนไปซ้าย 60 หน่วย และกลุ่มลูกเลื่อนมันไปขวา 60 หน่วย:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

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

สำหรับตราสัญลักษณ์นี้ คืนพิกัดเดิมของพาธที่สามและลบการเลื่อนเฉพาะมัน หากทั้งโลโก้ต้องย้าย ใช้ transform="translate(10 0)" กับกลุ่มด้านนอกเดิมแทน จะได้ D: ทั้งสามรูปทรงและสีร่วมย้ายด้วยกัน

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

เมื่อใด gradientTransform จึงมีประโยชน์

gradientTransform เปลี่ยนการแมปพิกัดสีโดยไม่เปลี่ยนรูปทรงพาธ มีประโยชน์เมื่อตั้งใจหมุน เฉือน หรือย้ายการไล่สี MDN อธิบายว่าเป็นการแปลงเพิ่มเติม ที่ใช้หลังสร้างระบบพิกัดที่เลือกด้วย gradientUnits

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

PerfectVector ช่วยในส่วนใด

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

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

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

เปิดไฟล์ใหม่ก่อนส่งมอบ

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

• ID ไล่สีมีอยู่และทุกพาธที่ตั้งใจไว้อ้างอิงมัน
• การไล่สีครอบคลุมขอบเขตโลโก้ในทิศทางที่ต้องการ
• การย้ายเครื่องหมายทั้งหมดรักษาสีให้สัมพันธ์กัน
• ส่วนแยกยังเลือกได้เมื่อต้องแก้ไข
• แอปพลิเคชันที่รับไฟล์รักษารูปลักษณ์ที่คาดหวัง

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

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

ต้องรวมพาธเพื่อใช้การไล่สีร่วมไหม? ไม่ พาธแยกอ้างอิงการไล่สีเดียวได้ ใช้ userSpaceOnUse กับปลายที่เหมาะสมและยืนยันว่าพาธใช้ระบบพิกัดร่วมที่ตั้งใจไว้

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

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

แหล่งอ้างอิง

1. MDN — gradientUnits — นิยามค่าปริยาย ระบบพิกัดอ้างอิง และพฤติกรรมเปอร์เซ็นต์
2. คณะทำงาน SVG — แหล่งสี — กำหนดสีไล่ระดับที่ใช้ซ้ำ จุดสี และพฤติกรรมการแผ่สี
3. MDN — gradientTransform — อธิบายการแปลงเพิ่มเติมของพิกัดไล่สี

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