ฉันได้แนะนำองค์ประกอบกราฟิกมากมายมาก่อน หากองค์ประกอบกราฟิกจำนวนมากเหมือนกันฉันจำเป็นต้องกำหนดองค์ประกอบใหม่ทุกครั้งหรือไม่? เราสามารถแบ่งปันกราฟิกได้หรือไม่? นี่คือจุดสนใจของส่วนนี้ - การใช้องค์ประกอบ SVG ซ้ำ
องค์ประกอบรวมกันองค์ประกอบ G เป็นคอนเทนเนอร์ที่รวมกลุ่มขององค์ประกอบกราฟิกที่เกี่ยวข้องเข้าด้วยกัน ด้วยวิธีนี้เราสามารถทำงานได้ทั้งหมดนี้ องค์ประกอบนี้สามารถใช้ร่วมกับองค์ประกอบ DESC และชื่อเรื่องเพื่อให้ข้อมูลโครงสร้างของเอกสาร เอกสารที่มีโครงสร้างที่ดีมักจะอ่านได้ดีและแสดงผล ดูตัวอย่างเล็ก ๆ :
<svgxmlns = "http://www.w3.org/2000/svg"
เวอร์ชัน = "1.1" width = "5cm" ความสูง = "5cm">
<Sc> Twogroups, OverfoftWorectangles </sc>
<gid = "Group1" fill = "red">
<rectx = "1cm" y = "1cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
<rectx = "3cm" y = "1cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
</g>
<gid = "Group2" fill = "blue">
<rectx = "1cm" y = "3cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
<rectx = "3cm" y = "3cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
</g>
<!-Showoutline of Canvasing'Rect'Element->
<rectx = ". 01cm" y = ". 01cm" ความกว้าง = "4.98cm" ความสูง = "4.98cm"
fill = "none" stroke = "blue" stroke-width = ". 02cm"/>
</svg>
บางจุดควรทราบ :1.xmlns = http: //www.w3.org/2000/SVG ระบุว่าเนมสเปซเริ่มต้นขององค์ประกอบ SVG ทั้งหมดคือ SVG สิ่งนี้สามารถละเว้นได้เมื่อไม่มีความคลุมเครือ เนื่องจากเอกสาร SVG เป็นเอกสาร XML กฎที่เกี่ยวข้องสำหรับเนมสเปซ XML จึงมีผลบังคับใช้ที่นี่ ตัวอย่างเช่นคุณสามารถให้เนมสเปซที่ระบุที่แสดงใน SVG ให้นามแฝงกับเนมสเปซ ฯลฯ
2.G องค์ประกอบสามารถซ้อนกันได้
3. องค์ประกอบกราฟิกรวมกันเหมือนกับองค์ประกอบของแต่ละบุคคลและสามารถกำหนดค่า ID ได้ ด้วยวิธีนี้เมื่อจำเป็น (เช่นภาพเคลื่อนไหวและการนำกลุ่มขององค์ประกอบกลับมาใช้ใหม่) คุณสามารถอ้างถึงค่า ID นี้ได้
4. การรวมชุดขององค์ประกอบกราฟิกสามารถตั้งค่าแอตทริบิวต์ที่เกี่ยวข้องของชุดองค์ประกอบนี้ (เติม, จังหวะ, การแปลง ฯลฯ ) ซึ่งเป็นสถานการณ์ที่ใช้ชุดค่าผสม
เทมเพลต - องค์ประกอบสัญลักษณ์องค์ประกอบสัญลักษณ์ใช้เพื่อกำหนดเทมเพลตกราฟิก (เทมเพลตสามารถมีกราฟิกจำนวนมาก) ซึ่งสามารถสร้างอินสแตนซ์โดยองค์ประกอบการใช้งาน ฟังก์ชั่นของเทมเพลตมีความคล้ายคลึงกับองค์ประกอบ G ทั้งสองให้ชุดของวัตถุกราฟิก แต่มีความแตกต่างบางอย่าง ความแตกต่างจากองค์ประกอบ G คือ:
1. องค์ประกอบสัญลักษณ์จะไม่แสดงผลเฉพาะอินสแตนซ์ของเทมเพลตสัญลักษณ์เท่านั้นที่จะแสดงผล
2. องค์ประกอบสัญลักษณ์สามารถมีแอตทริบิวต์ Viewbox และ Prespereaspectratio ซึ่งอนุญาตให้ใช้สัญลักษณ์เพื่อปรับองค์ประกอบกราฟิก
จากมุมมองของการแสดงผลองค์ประกอบที่คล้ายกับองค์ประกอบสัญลักษณ์คือเครื่องหมาย (กำหนดลูกศรและเครื่องหมาย) และรูปแบบ (กำหนดสี) องค์ประกอบ; องค์ประกอบเหล่านี้จะไม่แสดงโดยตรง การใช้งานของพวกเขานั้นถูกสร้างอินสแตนซ์โดยองค์ประกอบการใช้งาน ด้วยเหตุผลนี้อย่างแม่นยำว่าแอตทริบิวต์ 'การแสดงผล' นั้นไม่มีความหมายสำหรับสัญลักษณ์
รหัสที่แก้ไขต่อไปนี้แสดงวิธีการใช้สัญลักษณ์:
<svgxmlns = "http://www.w3.org/2000/svg"
xmlns: xlink = "http://www.w3.org/1999/xlink"
เวอร์ชัน = "1.1" width = "5cm" ความสูง = "5cm">
<Sc> Twogroups, OverfoftWorectangles </sc>
<symbolid = "Group1" fill = "red">
<rectx = "1cm" y = "1cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
<rectx = "3cm" y = "1cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
</ymbol>
<gid = "Group2" fill = "blue">
<rectx = "1cm" y = "3cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
<rectx = "3cm" y = "3cm" ความกว้าง = "1cm" ความสูง = "1cm"/>
</g>
<usexLink: href = "#group1" target = "_ blank" rel = "nofollow">
<!-Showoutline of Canvasing'Rect'Element->
<rectx = ". 02cm" y = ". 02cm" ความกว้าง = "4.96cm" ความสูง = "4.96cm"
fill = "none" stroke = "blue" stroke-width = ". 02cm"/>
</svg>
กำหนดองค์ประกอบ -defsSVG ช่วยให้คุณสามารถกำหนดชุดของวัตถุแล้วนำกลับมาใช้ใหม่ (โปรดทราบว่าไม่ใช่แค่วัตถุกราฟิก) ตัวอย่างที่พบบ่อยที่สุดคือการกำหนดสีไล่ระดับสีจากนั้นกำหนดแอตทริบิวต์เติมให้กับวัตถุกราฟิกอื่น ๆ คำจำกัดความสีไล่ระดับสีจะไม่ถูกแสดงผลดังนั้นวัตถุประเภทนี้สามารถวางได้ทุกที่ การใช้ซ้ำมักพบในวัตถุกราฟิกและเราไม่ต้องการแสดงผลโดยตรงเมื่อกำหนด แต่ต้องการแสดงผลในการอ้างอิงแทน สิ่งนี้สามารถนำไปใช้งานได้โดยใช้องค์ประกอบ DEFS
โดยทั่วไปวิธีการที่แนะนำคือวางวัตถุที่อ้างอิงลงในองค์ประกอบ defs เมื่อใดก็ตามที่เป็นไปได้ วัตถุเหล่านี้มักจะ: altglyphdef, clippath, เคอร์เซอร์, ตัวกรอง, เครื่องหมาย, หน้ากาก, รูปแบบ, lineargradient, radialgradient, สัญลักษณ์และวัตถุกราฟิก การกำหนดวัตถุเหล่านี้ในองค์ประกอบ DEFS นั้นง่ายต่อการเข้าใจดังนั้นจึงช่วยปรับปรุงการเข้าถึงได้
ในความเป็นจริงองค์ประกอบ G, องค์ประกอบสัญลักษณ์และองค์ประกอบ defs เป็นวัตถุคอนเทนเนอร์ทั้งหมดให้การใช้ซ้ำในระดับที่แตกต่างกัน แต่ลักษณะของแต่ละองค์ประกอบอาจแตกต่างกันเล็กน้อยเช่นองค์ประกอบ G จะแสดงผลโดยตรงสัญลักษณ์และ defs จะไม่แสดงผลโดยตรงสัญลักษณ์
โดยปกติแล้วองค์ประกอบที่กำหนดใน defs จะถูกกำหนดให้เป็นแอตทริบิวต์ ID และใช้โดยตรงทุกที่ที่ใช้ ขึ้นอยู่กับองค์ประกอบคำจำกัดความเหล่านี้สามารถใช้ในสถานที่ต่าง ๆ เช่นสีแบบก้าวหน้าต่อไปนี้เป็นแอตทริบิวต์:
<svgwidth = "8cm" ความสูง = "3cm"
xmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1">
<Sc> องค์ประกอบของ LocalUireReferencesWithInancestor's'defs '</sc>
<defs>
<linearGradientId = "GRADIENT01">
<stopoffset = "20%" stop-color = "#39F"/>
<stopoffset = "90%" stop-color = "#f3f"/>>
</lineargradient>
</defs>
<rectx = "1cm" y = "1cm" ความกว้าง = "6cm" ความสูง = "1cm"
fill = "url (#gradient01)"/>
</svg>
คำจำกัดความขององค์ประกอบที่เกี่ยวข้องกับกราฟิกสามารถเชื่อมโยงกับเอกสารโดยใช้องค์ประกอบการใช้งาน ตัวอย่างเช่น:
<svgwidth = "10cm" ความสูง = "3cm" viewbox = "0010030" เวอร์ชัน = "1.1"
xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<Sc> ExampleUs01-Simplecaseof'use'ona'Rect '</sc>
<defs>
<rectid = "myRect" width = "60" ความสูง = "10"/>
</defs>
<rectx = ". 1" y = ". 1" ความกว้าง = "99.8" ความสูง = "29.8"
fill = "none" stroke = "blue" stroke-width = ". 2"/>
<usex = "20" y = "10" xlink: href = "#myrect"/>
</svg>
โปรดทราบการใช้เนมสเปซ Xlink ที่นี่ แม้ว่าผู้ชมส่วนใหญ่จะแสดงรายการนี้อย่างถูกต้องโดยไม่ต้องมีความสอดคล้อง แต่ควรกำหนดเนมสเปซ XLink ในองค์ประกอบ <svg> </svg>
องค์ประกอบการใช้คำพูดSVG, สัญลักษณ์, G, องค์ประกอบกราฟิกเดี่ยวและองค์ประกอบการใช้สามารถอ้างอิงได้ (ตัวอย่างเช่นเริ่มต้น) เป็นวัตถุเทมเพลตโดยองค์ประกอบการใช้ เนื้อหากราฟิกที่อ้างอิงโดยการใช้งานจะถูกแสดงในตำแหน่งที่ระบุ ซึ่งแตกต่างจากองค์ประกอบภาพองค์ประกอบการใช้ไม่สามารถอ้างอิงเอกสารทั้งหมดได้
องค์ประกอบการใช้งานยังมีคุณลักษณะ x, y, ความกว้างและความสูง คุณลักษณะเหล่านี้สามารถละเว้นได้ หากไม่ละเว้นพิกัดเนื้อหากราฟิกที่อ้างอิงหรือความยาวจะถูกแมปกับพื้นที่พิกัดของผู้ใช้ปัจจุบัน
กระบวนการดำเนินการขององค์ประกอบการใช้งานนั้นเทียบเท่ากับการคัดลอกวัตถุอ้างอิงอย่างลึกซึ้งไปยังต้นไม้ DOM ที่ไม่ใช่แบบสาธารณะอิสระ โหนดหลักของต้นไม้นี้คือองค์ประกอบการใช้งาน แม้ว่ามันจะเป็นโหนด DOM ที่ไม่ใช่สาธารณะ แต่ก็เป็นโหนด DOM ดังนั้นค่าแอตทริบิวต์ทั้งหมดภาพเคลื่อนไหวเหตุการณ์และการตั้งค่าที่เกี่ยวข้องกับ CSS ของวัตถุที่อ้างอิงจะถูกคัดลอกและจะยังคงทำงานอยู่ ยิ่งไปกว่านั้นโหนดเหล่านี้จะสืบทอดคุณลักษณะที่เกี่ยวข้องขององค์ประกอบการใช้งานและการใช้บรรพบุรุษ (โปรดทราบว่าองค์ประกอบที่อ้างอิงเป็นสำเนาลึกและองค์ประกอบที่คัดลอกเหล่านี้ไม่มีส่วนเกี่ยวข้องกับองค์ประกอบดั้งเดิม หากโหนดเหล่านี้มีคุณสมบัติที่เกี่ยวข้อง (CSS) พวกเขาจะเขียนทับแอตทริบิวต์ที่สืบทอดมาซึ่งสอดคล้องกับโหนด DOM ทั่วไปดังนั้นโปรดระวังเมื่อใช้การมองเห็น อย่างไรก็ตามเนื่องจากโหนดเหล่านี้ไม่ใช่แบบสาธารณะในการดำเนินงาน DOM คุณสามารถเห็นองค์ประกอบการใช้งานเท่านั้นดังนั้นคุณจึงสามารถใช้งานองค์ประกอบการใช้งานได้เท่านั้น
จากมุมมองของเอฟเฟกต์ภาพองค์ประกอบการใช้เป็นเหมือนตัวยึดตำแหน่งและเอฟเฟกต์ภาพหลังจากการแสดงผลนั้นเหมือนกับการเรนเดอร์โดยตรงกับวัตถุอ้างอิง:
1. การใช้องค์ประกอบหมายถึงองค์ประกอบสัญลักษณ์ในกรณีนี้เอฟเฟกต์ภาพเทียบเท่ากับ:
(1) เปลี่ยนองค์ประกอบการใช้เป็นองค์ประกอบ G;
(2) ย้ายคุณสมบัติการใช้งานทั้งหมดยกเว้น x, y, ความกว้าง, ความสูง, xlink: href ไปยังองค์ประกอบ g;
(3) เปลี่ยนแอตทริบิวต์ X และ Y ของการใช้เป็น Translate (X, Y) และผนวกกับแอตทริบิวต์การแปลงสุดท้ายขององค์ประกอบ G;
(4) แทนที่องค์ประกอบสัญลักษณ์อ้างอิงด้วยองค์ประกอบ SVG องค์ประกอบ SVG นี้จะใช้แอตทริบิวต์ความกว้างและความสูงขององค์ประกอบการใช้งานอย่างชัดเจน (องค์ประกอบการใช้ไม่มีคุณลักษณะเหล่านี้ซึ่งเป็น 100%);
(5) คัดลอกเนื้อหากราฟิกอย่างลึกซึ้งขององค์ประกอบสัญลักษณ์อ้างอิงลงใน SVG ที่ถูกแทนที่
2. องค์ประกอบการใช้หมายถึงองค์ประกอบ SVGในกรณีนี้เอฟเฟกต์ภาพเทียบเท่ากับ:
(1) เปลี่ยนองค์ประกอบการใช้เป็นองค์ประกอบ G;
(2) ย้ายคุณสมบัติการใช้งานทั้งหมดยกเว้น x, y, ความกว้าง, ความสูง, xlink: href ไปยังองค์ประกอบ g;
(3) เปลี่ยนแอตทริบิวต์ X และ Y ของการใช้เป็น Translate (X, Y) และผนวกกับแอตทริบิวต์การแปลงสุดท้ายขององค์ประกอบ G;
(4) คัดลอกองค์ประกอบ SVG ที่อ้างอิงรวมถึงเนื้อหา องค์ประกอบ SVG นี้จะใช้แอตทริบิวต์ความกว้างและความสูงขององค์ประกอบการใช้งานอย่างชัดเจน (องค์ประกอบการใช้ไม่มีคุณลักษณะเหล่านี้และใช้ค่าดั้งเดิม);
3. สถานการณ์อื่น ๆเอฟเฟกต์ภาพในกรณีเหล่านี้เทียบเท่ากับ:
(1) เปลี่ยนองค์ประกอบการใช้เป็นองค์ประกอบ G;
(2) ย้ายคุณสมบัติการใช้งานทั้งหมดยกเว้น x, y, ความกว้าง, ความสูง, xlink: href ไปยังองค์ประกอบ g;
(3) เปลี่ยนแอตทริบิวต์ X และ Y ของการใช้เป็น Translate (X, Y) และผนวกกับแอตทริบิวต์การแปลงสุดท้ายขององค์ประกอบ G;
(4) คัดลอกองค์ประกอบที่อ้างอิง
ดูเอฟเฟกต์ภาพของตัวอย่างต่อไปนี้ :<svgwidth = "10cm" ความสูง = "3cm" viewbox = "0010030" เวอร์ชัน = "1.1"
xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<Sc> ExampleUs03 -'use'witha'transform'attribute </esc>
<defs>
<rectid = "myRect" x = "0" y = "0" ความกว้าง = "60" ความสูง = "10"/>
</defs>
<rectx = ". 1" y = ". 1" ความกว้าง = "99.8" ความสูง = "29.8"
fill = "none" stroke = "blue" stroke-width = ". 2"/>
<usexlink: href = "#myrect"
transform = "แปล (20,2.5) หมุน (10)"/>
</svg>
รูปต่อไปนี้มีลักษณะเหมือนกับรูปด้านบน :<svgwidth = "10cm" ความสูง = "3cm" viewbox = "0010030"
xmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1">
<Sc> ExampleUs03 -'use'witha'transform'attribute </esc>
<rectx = ". 1" y = ". 1" ความกว้าง = "99.8" ความสูง = "29.8"
fill = "none" stroke = "blue" stroke-width = ". 2"/>
<gtransform = "แปล (20,2.5) หมุน (10)">
<rectx = "0" y = "0" ความกว้าง = "60" ความสูง = "10"/>
</g>
</svg>
การอ้างอิงเชิงปฏิบัติ: ดัชนีสคริปต์: http://msdn.microsoft.com/zh-cn/library/ff97110(v=vs.85).aspxศูนย์พัฒนา: https://developer.mozilla.org/en/svg
ข้อมูลอ้างอิงยอดนิยม: http://www.chinasvg.com/
เอกสารอย่างเป็นทางการ: http://www.w3.org/tr/svg11/