การใช้การไล่ระดับสี SVG

เป็นไปได้ไหมที่จะสร้างการไล่ระดับสีเบลอแบบนี้ใน SVG อีกครั้ง?

svg gradient

คำตอบ:

ใช่และไม่.

เป็นไปได้ที่จะสร้างการไล่ระดับสีแบบตาข่ายใน Inkscape และบันทึกเป็น SVG อย่างไรก็ตามมาตรฐาน SVG ที่ใช้ในเบราว์เซอร์ยังไม่รองรับการไล่ระดับสี สิ่งนี้อาจเปลี่ยนแปลงได้ในอนาคต แต่สำหรับปัจจุบันไม่มี

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

นี่คือ SVG สำหรับรุ่นที่ใช้งานได้ในเบราว์เซอร์หากคุณต้องการ

แก้ไข : ลิงก์ด้านบนไปยัง SVG ไม่สามารถใช้งานได้อีกต่อไปดังนั้นฉันจึงลบมันออก

— บิลลี่เคอร์
แหล่งที่มา

เยี่ยมมาก! SVG ในลิงค์นั้นดูไม่เหมือนเม็ดมีดที่ให้ไว้ในคำตอบของคุณ ... มันดูเบากว่ามาก มีเหตุผลอะไรไหม?

— Jared Garcia

@JaredGarcia ฉันไม่รู้ว่าทำไม - การจับภาพหน้าจอของฉันตรงกับ SVG ตรงกับคอมพิวเตอร์ของฉันใน Inkscape - แต่ให้แน่ใจว่าคุณกำลังใช้ Inkscape รุ่นล่าสุด - ตอนนี้ที่รุ่น 0.92

— Billy Kerr

อ่าฉันกำลังดูอยู่ในเบราว์เซอร์บนมือถือของฉันโดยตรงจากลิงก์ดาวน์โหลดนั้น ฉันจะเปิดใน Inkscape และตรวจสอบ

— Jared Garcia

@ JaredGarcia โพสต์ว่าเป็นคำถามใหม่แทนเพื่อให้สามารถตอบได้อย่างถูกต้อง

— Andrew T.

การเบลอในเบราว์เซอร์มีราคาแพงมาก คุณสามารถรับเอฟเฟกต์เดียวกันโดยการไล่ระดับพื้นหลังแบบเลเยอร์ สิ่งเหล่านี้สามารถเคลื่อนไหวได้ และคุณสามารถใช้ background-ผสมผสาน - โหมดสำหรับลักษณะพิเศษในเบราว์เซอร์ที่ทันสมัย

— PieBie

มันสามารถทำใน Illustrator และ Inkscape เป็นตาข่ายไล่โทนสี เมื่อบันทึกเป็น SVG ใน Illustrator รุ่นเก่าจะเปลี่ยนเป็นรูปภาพบิตแมป เห็นได้ชัดว่า Illustator รู้เมื่อประมาณ 6 ปีที่แล้ว แต่ภาษา SVG ไม่ได้

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

ดังนั้นโดยไม่ทราบมาตรฐานฉันสามารถพูดได้ว่า "อย่างน้อยที่สุดก็ใช้งานได้ใน SVG ธรรมดาของ Inkscape"

หวังว่าบางคนรู้สถานะการพัฒนา SVG โปรแกรมเมอร์บอกสิ่งที่แน่นอน

— user287001
แหล่งที่มา

คุณสามารถใส่รหัสโดยตรงที่นี่ด้วยการจัดรูปแบบรหัสที่ถูกต้อง ไม่จำเป็นต้องโพสต์ภาพหน้าจอ

— Wrzlprmft

น่าเศร้าที่การไล่ระดับสีของ Inkscape ยังไม่ได้รับการสนับสนุนใน Google Chrome หรือ Firefox

— Billy Kerr

คุณสามารถโพสต์โค้ด svg ได้ไหม

— Jared Garcia

@ JaredGarcia ฉันไม่ได้ทำ ฉันเติมเพียง 10 โหนด 25 เพื่อดูว่ามันให้ดูถูกต้อง คุณสามารถทำมันเอง นำเข้าภาพไปยัง Inkscape ทำตารางที่มีขนาดเดียวกันตั้งค่าชนิดการเติม = การไล่ระดับสีตาข่ายเพิ่ม 3 แถวและคอลัมน์มากขึ้นด้วยเครื่องมือตาข่ายโดยที่เครื่องมือโหนดเลือกโหนดทีละโหนดและตัวเลือกสีใช้ สีจากภาพที่นำเข้า บันทึกเป็น SVG ธรรมดาเปิดใน Win Notepad เพื่อดูรหัส

— 287001

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

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

ไม่ใช่เวกเตอร์ แต่ก็อาจเป็นเพราะขนาดไฟล์เล็กมากและภาพก็ขยายขนาดไม่ จำกัด

— peterhry
แหล่งที่มา

ยินดีต้อนรับสู่GDSE - glaf เพื่อรับคุณที่นี่! กรุณาดูรอบการท่องเที่ยวและได้รับความรู้สึกของวิธีการที่เราชอบที่จะถามวิธีการถามและตอบวิธีการตอบคำถาม อาจเป็นความคิดที่ดีที่จะดูรหัสพฤติกรรมโดยรวมในขณะที่คุณกำลังดูศูนย์ช่วยเหลือรอบคำตอบของคุณคือคำตอบที่ดีในแง่ของการบังคับใช้สิ่งที่คุณแบ่งปัน แต่ที่GDSEเราต้องการใช้ลิงก์เพื่อการอ้างอิงเท่านั้น หรือเพื่อผูกทรัพยากรเมื่อลิงก์เปลี่ยนหรือหายไปอย่างง่ายดายเกินไป: คุณสามารถสรุปเนื้อหาที่คุณคาดเดาไว้ในเนื้อหาที่คุณตอบได้ไหม?

— GerardFalla