ข้อดีและข้อเสียของการจัดรูปแบบ SVG แบบอินไลน์และภายนอก

เมื่อพูดถึงการจัดรูปแบบกราฟิกแบบเวกเตอร์ มีสองวิธีหลักในการดำเนินการ: แบบอินไลน์หรือแบบภายนอก สไตล์อินไลน์คือสไตล์ที่เขียนลงในโค้ด SVG โดยตรง ในขณะที่สไตล์ภายนอกคือสไตล์ที่เขียนลงในไฟล์ CSS แยกต่างหาก แล้วอ้างอิงโดยโค้ด SVG ทั้งสองวิธีมีข้อดีและข้อเสีย แต่โดยทั่วไปแล้ว การใช้รูปแบบภายนอกเป็นวิธีที่ดีที่สุด นั่นเป็นเพราะมันช่วยให้คุณรักษาโค้ด SVG ของคุณให้สะอาดและไม่กระจัดกระจาย และยังทำให้ง่ายต่อการใช้สไตล์ซ้ำในไฟล์ SVG หลาย ๆ ไฟล์ วิธีจัดรูปแบบ SVG โดยใช้สไตล์ชีตแยกต่างหากต่อไปนี้เป็นบทสรุปโดยย่อ: 1. สร้างไฟล์ CSS และเพิ่มสไตล์ของคุณลงไป 2. เพิ่มการอ้างอิงไปยังไฟล์ CSS ของคุณในส่วนรหัส SVG ของคุณ 3. ใช้สไตล์กับองค์ประกอบที่ต้องการภายในโค้ด SVG ของคุณ และนั่นคือทั้งหมด! การใช้สไตล์ชีตแยกต่างหากเป็นวิธีที่ยอดเยี่ยมในการทำให้โค้ด SVG ของคุณสะอาดและเป็นระเบียบ และยังทำให้นำสไตล์กลับมาใช้ซ้ำในไฟล์ต่างๆ ได้ง่ายขึ้น ลองดูด้วยตัวคุณเอง

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

กราฟิกที่มีการเติมสีดำหรือสีขาวหรือสีเทาจะไม่ทำงาน ไฟล์ CSS ภายนอกสามารถใช้จัดรูปแบบได้ หากคุณเลือกแท็ก HTML เมื่อคุณโหลด svg แบบอินไลน์จากแหล่งที่ไม่น่าเชื่อถือ คุณจะสามารถรวมสคริปต์, css และองค์ประกอบอื่นๆ ที่กำหนดเองใน HTML ของคุณ ซึ่งทำลายแซนด์บ็อกซ์ของคุณ คุณต้องรวมหรือแทรกไฟล์ .svg ลงใน DOM ของเอกสารในกรณีนี้ ไม่ว่าจะภายใน HTML หรือร่วมกับไฟล์นั้น ฟังก์ชัน the.js จะถูกส่งผ่านหลังจากโหลดองค์ประกอบแล้ว ซึ่งควรทำงานเช่นเดียวกับแท็ก img ใน DOM (หรือวิธีที่คล้ายกัน) เอกสารไม่มี Javascript ไม่มีรหัสเซิร์ฟเวอร์ และไม่มีรหัสรูท หลังจากนั้น เราสามารถใช้กับแท็ก SVG2 ที่ดูเหมือนว่าจะรองรับโดย Chrome/Edge – Blink; Firefox – ตุ๊กแก; และ Safari – Webkit หากคุณกลัวที่จะใช้แบบอักษรไอคอน ไม่มีวิธีที่ดีกว่านี้หากไม่มีแบบอักษร: ทำตามขั้นตอนเหล่านี้: หากคุณสนใจที่จะเปลี่ยนสีของไฟล์ thesvg ในภายหลัง คุณสามารถใช้ไฟล์นี้เป็นชื่อไฟล์ PHP

สไตล์ชีตสามารถฝังลงในเนื้อหา SVG ได้โดยตรงด้วยองค์ประกอบ “สไตล์” (*style) สไตล์> ซึ่งเป็น องค์ประกอบสไตล์ ของ HTML มีแอตทริบิวต์เดียวกันกับองค์ประกอบสไตล์ของ SVG (ดูองค์ประกอบสไตล์> ของ HTML สำหรับข้อมูลเพิ่มเติม)

เมื่อใช้แท็ก [svg] /svg[/svg] เอกสาร HTML สามารถสร้างแบบไดนามิกด้วย ภาพ SVG คุณสามารถทำได้โดยเปิดไฟล์ SVG ในโค้ด VS หรือ IDE ที่คุณต้องการ คัดลอกโค้ดแล้วใส่ลงในองค์ประกอบเนื้อหาในเอกสาร HTML ของคุณ คุณควรจะสามารถเห็นหน้าเว็บของคุณได้เหมือนกับในตัวอย่างต่อไปนี้ หากทุกอย่างเป็นไปอย่างราบรื่น

เมื่อใช้ใน CSS เราสามารถใช้ SVG เป็น URI ข้อมูลได้ แต่สามารถเข้าถึงได้ในเบราว์เซอร์ที่ใช้ Webkit เท่านั้นโดยไม่ต้องเข้ารหัส เมธอด encodeURIComponent() จะทำให้แน่ใจว่า SVG ถูกเข้ารหัสทุกที่ XMLns ที่มีแอตทริบิวต์นี้ต้องอยู่ใน SVG: XMLns ='http: //www.w3.org/2000/svg'

คุณสามารถใช้ Css เพื่อจัดรูปแบบ Svg ได้หรือไม่?

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

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

มีวิธีการตรวจสอบเอกสารย่อยนั้นเพื่อดูการทำงานภายในหรือไม่? มีร่างโคลนของตัวเองอยู่ในองค์ประกอบนี้ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome สามารถใช้ตรวจสอบเนื้อหาของ DOM เงาได้ ในการทำเช่นนั้น ให้คลิกไอคอนฟันเฟืองในแท็บทั่วไปของแผงการตั้งค่า จากนั้นเปิดใช้การตรวจสอบ shadow DOM ในทางกลับกัน DOM เงาจะทำงานแตกต่างจากเอกสารหลักเมื่อพูดถึงการจัดการ CSS และ JavaScript ดังนั้นคุณจึงไม่สามารถบอกได้ว่าเป็น DOM ปกติหรือ DOM เงา เป็นไปไม่ได้ที่จะกำหนดเป้าหมายไปยังเส้นทางที่สืบทอดมาของฟังก์ชันนั้น เนื่องจากไม่มีตัวเลือก CSS ปกติ เราจึงไม่สามารถเข้าถึง DOM เงาได้

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

ด้วยเหตุนี้ การใช้คำหลักที่สืบทอด CSS จึงค่อนข้างง่าย ดูตัวอย่างต่อไปนี้ของไอคอนไอศกรีมที่ประกอบด้วยเส้นทางเดียวเท่านั้นที่สามารถเปลี่ยนสีเติมสำหรับแอปพลิเคชันอื่นได้ เนื้อหาของ CSS all Property นั้นมีประโยชน์อย่างมาก แต่ก็เป็นมาตรการที่รุนแรง โดยพื้นฐานแล้ว การประกาศนี้จะส่งคืนค่าของคุณสมบัติของทุกองค์ประกอบจากบรรพบุรุษของมัน ใช้งานได้กับเบราว์เซอร์ที่รองรับคุณสมบัติทั้งหมด (ดูรายการคุณสมบัติสำหรับข้อมูลเพิ่มเติม) เมื่อใช้ตัวแปร CSS currentColor เราสามารถระบุสีที่แตกต่างกันสองสีในองค์ประกอบแทนที่จะเป็นเพียงสีเดียว จุดประสงค์ของการใช้เทคนิคนี้คือการรวมคุณสมบัติการเติมและสีบน >use> เพื่อให้สีเรียงซ้อนในเนื้อหาของหน้าตามลักษณะตัวแปรของ currentColor

เราจะใช้ตัวแปร currentColor เพื่อระบุค่าสีสำหรับแต่ละหยดในด้านหน้า ตามที่ระบุไว้ในคุณสมบัติสี โลโก้สองสีที่เรียบง่ายจะได้รับประโยชน์อย่างมากจากเทคนิคนี้ Amelia Bellamy-Royds นำเสนอแนวคิดนี้เป็นครั้งแรกในบล็อกโพสต์ของ Codepen เมื่อไม่กี่ปีที่ผ่านมา หากคุณใช้ตัวแปร CSS เนื้อหาขององค์ประกอบสามารถจัดรูปแบบได้โดยไม่ต้องบังคับเบราว์เซอร์ให้แทนที่ค่าแอตทริบิวต์การนำเสนอใดๆ ตัวแปรซึ่งเป็นเอนทิตีที่กำหนดเว็บเพจตามค่าเฉพาะ สร้างขึ้นโดยผู้เขียนหรือผู้ใช้ มีการใช้บ่อยกว่าและทำในสิ่งที่ตัวแปรตัวประมวลผลล่วงหน้าไม่สามารถทำได้ แม้จะมีความคล้ายคลึงกับตัวแปรตัวประมวลผลล่วงหน้า CSS (เช่น Sass) ด้วยสำเนารูปภาพหลายชุด คุณสามารถเลือกชุดสีที่จะใช้และสร้างธีมต่างๆ ตามการใช้รูปภาพ

มีประโยชน์อย่างยิ่งหากคุณต้องการจัดรูปแบบโลโก้ในรูปแบบต่างๆ เช่น ในบริบทเฉพาะหรือเพื่อวัตถุประสงค์อื่นที่คล้ายคลึงกัน ยังมีโอกาสที่คุณสามารถรวมคุณสมบัติการเติมและสีร่วมกับตัวแปรเหล่านี้ได้ แต่คุณอาจไม่ต้องการหรือไม่ต้องการ เมื่อไม่โหลดค่าของตัวแปร เบราว์เซอร์จะเปลี่ยนกลับเป็นสีเริ่มต้นซึ่งระบุไว้ในมาร์กอัป ทุกอินสแตนซ์ใหม่จะมีธีมสีของตัวเองตามค่าที่ตั้งไว้ใน CSS ด้วยการใช้ CSS cascades คุณสามารถจัดรูปแบบเนื้อหาของ >use> ได้ง่ายขึ้น กราฟิกของเราสามารถปรับแต่งตามข้อกำหนดของเราโดยใช้ตัวแปร CSS ที่เราสามารถแทรกลงใน DOM เงา ขณะนี้มีให้บริการใน Firefox เท่านั้น แต่คุณสามารถลงคะแนนให้ในเบราว์เซอร์อื่นโดยเร็วที่สุด มีการพูดคุยกันเกี่ยวกับการใช้ตัวแปร CSS เป็น พารามิเตอร์ SVG ในอนาคต ดังนั้นเราอาจนำไปใช้ในรูปแบบอื่น

รูปภาพในรูปแบบ SVG จะแสดงเป็นไฟล์ .svg หากต้องการเปลี่ยนวิธีแสดง ภาพ SVG ในเบราว์เซอร์ คุณต้องใช้หนึ่งในสามวิธีที่แสดงด้านล่าง เมื่อคุณใช้ *object> SVG จะถูกวางเป็น aaobject และจะใช้ CSS และ Javascript เพื่อควบคุม สามารถใช้ *iframe/ CSS และ Javascript เพื่อควบคุม SVG เมื่อโหลดเป็นวัตถุเอกสารโดยใช้ *svg หากต้องการเปลี่ยนสีของรูปภาพ SVG คุณต้องป้อนคุณสมบัติการเติมลงในแท็ก svg ก่อน สามารถเปลี่ยนสีได้โดยใช้ CSS หลังจากนั้น หลังจากตั้งค่าคุณสมบัติการเติมแล้ว ระบบจะใช้คุณสมบัติสีขององค์ประกอบหรือพาเรนต์ของแท็ก svg

ข้อดีข้อเสียของ Svg และ Css

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

กราฟิก Svg สามารถปรับขนาดด้วย Css ได้หรือไม่

หากคุณใช้ CSS เพื่อตั้งค่าความสูงหรือความกว้างของ SVG ของคุณ คุณสมบัติความสูงและความกว้างของ *svg เพื่อให้ ความสูง SVG แบบอินไลน์เริ่มต้น แก่คุณ คุณต้องตั้งค่า svg (*width: 100%; height: auto;*) เป็น กฎที่ยกเลิกขนาดและอัตราส่วนกว้างยาวที่ระบุในโค้ด

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

ViewBox เป็นซอฟต์แวร์ชิ้นสุดท้ายที่สร้าง Scalable Vector Graphics (SVG) องค์ประกอบ viewBox เป็นองค์ประกอบคุณสมบัติในองค์ประกอบ elements.svg() ในรูปแบบพื้นฐานที่สุดคือรายการของตัวเลขสี่ตัวที่คั่นด้วยช่องว่างหรือเครื่องหมายจุลภาค: x, y, ความกว้าง และความสูง สำหรับมุมซ้ายของวิวพอร์ต x และ y กำหนดระบบพิกัด ความสูงสามารถคำนวณได้โดยการคูณจำนวนอักขระ/พิกัดที่ต้องการเพื่อเติมความสูงที่มีอยู่ด้วยความสูงที่กำหนด หากคุณให้ขนาดภาพไม่ตรงกับอัตราส่วนภาพ ภาพจะไม่ถูกยืดหรือบิดเบี้ยว คุณสมบัติ CSS ที่พอดีกับวัตถุซึ่งสามารถใช้กับรูปภาพประเภทอื่นได้เช่นกัน ช่วยให้คุณทำเช่นเดียวกันได้

นอกจากนี้ คุณมีตัวเลือกในการรักษา AspectRatioLastBeforeScale=”ไม่มี” ซึ่งจะทำให้รูปภาพของคุณปรับขนาดให้มีขนาดเท่ากับภาพแรสเตอร์ ความกว้างหรือความสูงของภาพสามารถปรับได้โดยใช้มาตราส่วนภาพแรสเตอร์ เป็นไปได้ไหมที่จะผ่าน sva? ยิ่งผ่านไปหลายเดือนก็ยิ่งยากขึ้น การใช้การปรับขนาดรูปภาพอัตโนมัติด้วยไฟล์ >img> เป็นจุดเริ่มต้นที่ดี แต่การแฮ็กนั้นยากกว่าเล็กน้อย ด้วยการใช้คุณสมบัติ CSS ที่หลากหลาย คุณสามารถปรับอัตราส่วนขององค์ประกอบได้โดยการปรับความสูงและระยะขอบ เบราว์เซอร์อื่นๆ จะกำหนดขนาดของรูปภาพเป็น 300*150 โดยอัตโนมัติหากมี viewBox พฤติกรรมนี้ไม่ได้กำหนดไว้ในข้อกำหนดใดๆ

หากคุณใช้เบราว์เซอร์ Blink/Firefox ล่าสุด คุณสามารถเปลี่ยนขนาดของภาพให้พอดีกับช่องมองภาพ หากคุณไม่ระบุความสูงหรือความกว้าง ขนาดเริ่มต้นของเบราว์เซอร์เหล่านี้จะถูกตั้งค่า องค์ประกอบคอนเทนเนอร์เป็นวิธีที่ง่ายที่สุดในการแทนที่องค์ประกอบต่างๆ เช่น SVG และ >object> ที่อยู่ในบรรทัดใน SVG ความสูงอย่างเป็นทางการจะเป็นศูนย์ (สูงสุด) ตามกราฟิกแบบอินไลน์ ด้วยค่าเริ่มต้นของการรักษาอัตราส่วนภาพ กราฟิกจะถูกปรับขนาดเป็นค่าว่าง คุณต้องการยืดกราฟิกของคุณเพื่อให้ครอบคลุมความกว้างทั้งหมดที่คุณระบุ และขยายออกไปยังพื้นที่ที่ขยายซึ่งคุณตั้งค่าอย่างระมัดระวังสำหรับอัตราส่วนภาพที่ถูกต้อง ViewBox และ PreserveRatioAspect ช่วยให้คุณสร้างมุมมองที่ปรับเปลี่ยนได้อย่างมาก องค์ประกอบที่ซ้อนกันสามารถใช้เพื่อแยกส่วนต่างๆ ของมาตราส่วนกราฟิกของคุณ และนำเสนอตามลำดับที่แตกต่างกัน โดยใช้แอตทริบิวต์มาตราส่วนของแต่ละองค์ประกอบ เป้าหมายของแนวทางนี้คือการสร้างกราฟิกส่วนหัวที่ขยายให้ครอบคลุมจอภาพไวด์สกรีนโดยไม่กีดขวางความสูง

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

ปรับขนาดรูปภาพด้วย Svg

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

วิธีการจัดรูปแบบ Svg Css

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

เมื่อคุณลักษณะถูกวาดโดยใช้ SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) จะสามารถใช้สไตล์ CSS ของเลเยอร์แผนที่ได้ ในทางกลับกัน ตัวแสดงภาพและสัญลักษณ์กลับไม่น่าสนใจสำหรับนักพัฒนาที่คุ้นเคยกับการใช้ CSS ไม่สามารถใช้ CSS เพื่อสนับสนุนวิธีการวาดเวกเตอร์อื่นๆ ที่ใช้ในเบราว์เซอร์รุ่นเก่า เช่น Canvas, VML และอื่นๆ การกำหนดรูปแบบคุณลักษณะโดยใช้ CSS สามารถทำได้หลายวิธี วิธีการปรับขนาดในตัวของ D3 สามารถใช้เพื่อจัดเรียงข้อมูลของเราลงในที่ฝากข้อมูล แล้วนำสไตล์ไปใช้กับแต่ละที่เก็บข้อมูลโดยใช้ชุดเครื่องมือ D3 เนื่องจากสไตล์ถูกตั้งค่าเป็น False ในคลาสกราฟิก คุณจึงสามารถเพิ่มแอตทริบิวต์ข้อมูลใหม่จำนวนหนึ่งได้ทันที สไตล์ใช้กับ Renderer โดยใช้ JS API ในลักษณะเดียวกับที่ใช้สไตล์กับองค์ประกอบ Path ค่าแอตทริบิวต์ใช้เพื่อกำหนดลักษณะโหนดด้วยแอตทริบิวต์ data ซึ่งใช้เพื่อกำหนดตัวแบ่งคลาส และป้ายกำกับซึ่งใช้เพื่อกำหนดป้ายกำกับ เราสามารถใช้ตัวเลือกเสมือนเช่น: โฮเวอร์เพื่อเพิ่มเอฟเฟ็กต์โฮเวอร์ให้กับหน้าเมื่อใช้ CSS

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

สไตล์ Svg ด้วย Css ภายนอก

วิธีหนึ่งในการจัดรูปแบบ SVG ด้วย CSS ภายนอกคือการใช้