HTML5 SVG 2D บทนำ 8 - โครงสร้างเอกสารและองค์ประกอบที่เกี่ยวข้องสรุป

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

องค์ประกอบของเอกสาร SVG สามารถแบ่งออกเป็นหมวดหมู่ต่อไปนี้:

•องค์ประกอบแอนิเมชั่น: Animate, Animatecolor, AnimateMotion, AnimateTransform, Set;

•องค์ประกอบคำอธิบาย: DESC, ข้อมูลเมตา, ชื่อ;

•องค์ประกอบกราฟิก: วงกลม, วงรี, เส้น, เส้นทาง, รูปหลายเหลี่ยม, รูปหลายเหลี่ยม, rect;

•องค์ประกอบโครงสร้าง: defs, g, svg, สัญลักษณ์, การใช้;

•องค์ประกอบการไล่ระดับสี: lineargradient, radialgradient;

•องค์ประกอบอื่น ๆ : A, Altglyphdef, Clippath, สีโปรไฟล์, เคอร์เซอร์, ตัวกรอง, ตัวอักษร, ตัวอักษร-หน้า, ต่างประเทศ, ภาพ, เครื่องหมาย, หน้ากาก, รูปแบบ, สคริปต์, สไตล์, สวิตช์, ข้อความ, มุมมอง ฯลฯ

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

องค์ประกอบอื่น ๆ สามารถวางไว้ในลำดับใด ๆ ในองค์ประกอบ SVG รวมถึงองค์ประกอบ SVG ที่ซ้อนกัน

คุณสมบัติที่รองรับโดยองค์ประกอบ SVG มักใช้กันทั่วไปคือ ID, คลาส, x, y, ความกว้าง, ความสูง, viewbox, prespereaspectratio และแอตทริบิวต์ที่เกี่ยวข้องกับการเติมและจังหวะ

เหตุการณ์ที่ได้รับการสนับสนุนโดยองค์ประกอบ SVG นั้นมักใช้ OnLoad, OnMouseOver, Onmousemove, Onmousedown, Onmouseup, Onclick, Onfocusin, Onfocusout, OnResize, Onscroll, Onunload ฯลฯ ฉันจะไม่พูดถึงองค์ประกอบ SVG สำหรับคุณลักษณะที่สมบูรณ์และรายการกิจกรรมโปรดดูเอกสารอย่างเป็นทางการด้านล่าง

แต่ละองค์ประกอบคอนเทนเนอร์ (ซึ่งสามารถมีองค์ประกอบหรือองค์ประกอบของคอนเทนเนอร์อื่น ๆ ขององค์ประกอบกราฟิกเช่น: a, defs, glyph, g, marker, หน้ากาก, Missing-glyph, รูปแบบ, SVG, สวิตช์และสัญลักษณ์) และองค์ประกอบกราฟิกอาจมีองค์ประกอบ DESC และชื่อ องค์ประกอบทั้งสองนี้เป็นองค์ประกอบเสริมและใช้เพื่ออธิบายสถานการณ์ที่เกี่ยวข้อง เนื้อหาของพวกเขาคือข้อความ เมื่อเอกสาร SVG มีการแสดงผลองค์ประกอบทั้งสองนี้จะไม่ถูกแสดงเป็นกราฟิก ความแตกต่างระหว่างองค์ประกอบทั้งสองนั้นไม่ใหญ่เกินไป ชื่อเรื่องจะปรากฏเป็นข้อความแจ้งในการใช้งานบางอย่างดังนั้นชื่อมักจะอยู่ที่ตำแหน่งแรกขององค์ประกอบหลัก

ประเพณีทั่วไปมีดังนี้:

<svgxmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1" width = "4in" ความสูง = "3in">

<g>

<title> CompanysalesbyRegion </title>

<Sc>

thisabarchart ซึ่งแสดง

CompanysalesbyRegion

</desc>

<!-barchartdefinedasvectordata->

</g>

</svg>

โดยทั่วไปองค์ประกอบ SVG นอกสุดควรจะมาพร้อมกับคำอธิบายชื่อเรื่องเพื่อให้โปรแกรมสามารถอ่านได้ดีกว่า

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

เครื่องหมายถูกกำหนดโดยองค์ประกอบเครื่องหมายจากนั้นตั้งค่าแอตทริบิวต์ที่เกี่ยวข้อง (เครื่องหมาย, เครื่องหมายเริ่มต้น, เครื่องหมายกลางและเครื่องหมาย) ในเส้นทาง, เส้น, polyline หรือรูปหลายเหลี่ยม ดูตัวอย่าง:

<svgwidth = "4in" ความสูง = "2in"

viewbox = "0040002000" เวอร์ชัน = "1.1"

xmlns = "http://www.w3.org/2000/svg">

<defs>

<markerid = "สามเหลี่ยม"

viewbox = "001010" refx = "0" refy = "5"

markerunits = "strokewidth"

markerWidth = "4" markerHeight = "3"

Orient = "Auto">

<pathd = "M00L105L010Z"/>

</marker>

</defs>

<Sc> Placinganarrowheadattheendofapath

</desc>

<pathd = "M1000750L2000750L25001250"

fill = "none" stroke = "black" stroke-width = "100"

marker-end = "url (#triangle)"/>

</svg>

1. เครื่องหมายเป็นองค์ประกอบคอนเทนเนอร์ซึ่งสามารถเก็บองค์ประกอบกราฟิกองค์ประกอบคอนเทนเนอร์ภาพเคลื่อนไหวองค์ประกอบการไล่ระดับสี ฯลฯ ในลำดับใด ๆ

2. องค์ประกอบเครื่องหมายสามารถสร้างหน้าต่างใหม่: ตั้งค่าของ viewbox

3. คุณลักษณะที่สำคัญของเครื่องหมาย:

markerunits = strokeWidth | userspaceonuse

คุณสมบัตินี้กำหนดระบบพิกัดที่ใช้โดยเนื้อหาของคุณสมบัติ Markerwidth, markerheight และ marker คุณสมบัตินี้มี 2 ค่าให้เลือก ค่าแรก strokeWidth คือค่าเริ่มต้น ระบบพิกัดที่ใช้โดยเนื้อหาของคุณลักษณะ markerwidth, markerheight และ marker เท่ากับค่าที่กำหนดโดยความกว้างจังหวะขององค์ประกอบกราฟิกของเครื่องหมาย

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

ค่าอื่นของแอตทริบิวต์นี้คือ Userspaceonuse ซึ่งแสดงถึงเนื้อหาของคุณลักษณะ markerwidth, markerheight และ marker โดยใช้ระบบพิกัดที่อ้างถึงองค์ประกอบกราฟิกของเครื่องหมาย

REFX, Refy: กำหนดตำแหน่งพิกัดของจุดอ้างอิงที่สอดคล้องกับเครื่องหมาย ตัวอย่างเช่นในตัวอย่างข้างต้นจุดอ้างอิงคือจุดสิ้นสุดและจะต้องสอดคล้องกับตำแหน่ง (0,5) ของเครื่องหมาย โปรดทราบว่า refx และ refy ใช้ระบบพิกัดผู้ใช้ปลายทางที่แปลงโดย viewbox

Markerwidth, MarkerHeight: ความกว้างและความสูงของหน้าต่างเครื่องหมายนี้เข้าใจง่าย

มุ่งเน้น: กำหนดมุมของการหมุนของเครื่องหมาย คุณสามารถระบุมุมหรือกำหนดอัตโนมัติโดยตรง

. หากจุดที่เครื่องหมายอยู่เป็นเพียงเส้นทางเดียวทิศทางไปข้างหน้าของแกน x ของเครื่องหมายจะเหมือนกับเส้นทาง ดูตัวอย่างด้านบน

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

4. คุณลักษณะของมาร์กเกอร์ขององค์ประกอบกราฟิก

ในการอ้างอิงเครื่องหมายจะต้องใช้แอตทริบิวต์ที่เกี่ยวข้องส่วนใหญ่สาม: marker-start (ใส่เครื่องหมายอ้างอิงไปยังจุดเริ่มต้น), marker-mid (ใส่เครื่องหมายอ้างอิงไปยังจุดทั้งหมดยกเว้นจุดเริ่มต้นและจุดสิ้นสุด), marker-end (วางเครื่องหมายอ้างอิงไปยังจุดสิ้นสุด) ค่าของแอตทริบิวต์ทั้งสามนี้อาจไม่มี (แสดงให้เห็นว่าเครื่องหมายไม่ได้อ้างถึง), การอ้างอิงเครื่องหมาย (หมายถึงเครื่องหมายที่แน่นอน), สืบทอด (ไม่จำเป็นต้องพูด)

คุณยังสามารถเห็นการใช้เครื่องหมายจากตัวอย่างด้านบน

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

<svgwidth = "400" ความสูง = "200" xmlns = "http://www.w3.org/2000/svg">

<Sc> TEXT </SC> <defs>

<styleType = "text/css">

<! [cdata [

.Abbreviation {การกำหนดข้อความ: ขีดเส้นใต้;}

-

</style>

</defs>

<g>

<textx = "20" y = "50" font-size = "30"> colorscanbespecified </text>

<textx = "20" y = "100" font-size = "30"> bytheir

<tspanfill = "rgb (255,0,0)" class = "ตัวย่อ"> r </tspan>

<tspanfill = "rgb (0,255,0)" class = "ตัวย่อ"> g </tspan>

<tspanfill = "rgb (0,0,255)" class = "ตัวย่อ"> b </tspan> ค่า </text>

<textx = "20" y = "150" font-size = "30"> orbykeywordssuchas </text>

<textx = "20" y = "200">

<tspanstyle = "Fill: LightsteelBlue; Font-Size: 30"> LightSteelBlue </tspan>,

</text>

</g>

</svg>

ดูตัวอย่างสคริปต์:

<svgwidth = "500" ความสูง = "300" xmlns = "http://www.w3.org/2000/svg">

<Sc> ScriptingTheOnClickeven </sc>

<defs>

<scriptType = "text/ecmascript">

<! [cdata [

functionhidereveal (evt) {

VariableTarget = evt.target;

varTefill = imageTarget.getAttribute ("เติม");

if (thefill == 'White')

imageTarget.setAttribute ("เติม", "url (#notes)");

อื่น

imagetarget.setAttribute ("เติม", "White");

-

-

</script>

<patternid = "notes" x = "0" y = "0" width = "50" ความสูง = "75"

PatternTransform = "หมุน (15)"

patternunits = "userspaceonuse">

<ellipsecx = "10" cy = "30" rx = "10" ry = "5"/>

<linex1 = "20" y1 = "30" x2 = "20" y2 = "0"

stroke-width = "3" stroke = "black"/>

<linex1 = "20" y1 = "0" x2 = "30" y2 = "5"

stroke-width = "3" stroke = "black"/>

</pattern>

</defs>

<ellipseonClick = "Hidereveal (EVT)" CX = "175" CY = "100" RX = "125" RY = "60"

fill = "url (#notes)" stroke = "black" stroke-width = "5"/>

</svg>

คุณลักษณะการประมวลผลแบบมีเงื่อนไขเป็นคุณลักษณะที่สามารถควบคุมได้ว่าองค์ประกอบนั้นจะแสดงผลหรือไม่ โดยทั่วไปองค์ประกอบส่วนใหญ่ (โดยเฉพาะอย่างยิ่งองค์ประกอบกราฟิก) สามารถระบุคุณสมบัติการประมวลผลตามเงื่อนไข มีคุณสมบัติการประมวลผลแบบมีเงื่อนไข 3 ประการ: Features ที่จำเป็น, การขยายเวลาที่จำเป็นและ Systemlanguage คุณสมบัติเหล่านี้เป็นชุดของการทดสอบซึ่งอนุญาตให้คุณระบุรายการของค่า (คุณสมบัติสองคุณสมบัติแรกจะถูกคั่นด้วยช่องว่างและคุณสมบัติทางภาษาจะถูกคั่นด้วยเครื่องหมายจุลภาค) และค่าเริ่มต้นเป็นจริง

องค์ประกอบสวิตช์ของ SVG ให้ความสามารถในการแสดงผลตามเงื่อนไขที่ระบุ องค์ประกอบสวิตช์เป็นองค์ประกอบคอนเทนเนอร์ที่สามารถมีองค์ประกอบกราฟิกองค์ประกอบอธิบายองค์ประกอบภาพเคลื่อนไหว A, ต่างประเทศ, G, รูปภาพ, SVG, สวิตช์, ข้อความ, การใช้งานและองค์ประกอบอื่น ๆ องค์ประกอบสวิตช์จะตรวจสอบแอตทริบิวต์การประมวลผลแบบมีเงื่อนไขขององค์ประกอบเด็กโดยตรงตามลำดับจากนั้นแสดงองค์ประกอบลูกแรกที่ตรงตามเงื่อนไขของตัวเอง องค์ประกอบของเด็กอื่นจะถูกละเว้น คุณสมบัติเหล่านี้เช่นคุณสมบัติการแสดงผลจะส่งผลกระทบต่อการเรนเดอร์ขององค์ประกอบที่ใช้คุณสมบัติเหล่านี้โดยตรงและจะไม่ส่งผลกระทบต่อองค์ประกอบที่อ้างอิง (เช่นองค์ประกอบที่อ้างอิงโดยการใช้งาน) กล่าวง่ายๆว่าคุณลักษณะทั้งสามนี้จะส่งผลกระทบต่อองค์ประกอบต่าง ๆ เช่น A, altglyph, ต่างประเทศ, TextPath, Tref, Tspan, Animate, Animatecolor, AnimateMotion, AnimateTransform, Set, ฯลฯ และจะไม่ส่งผลกระทบต่อองค์ประกอบอื่น ๆ

สำหรับรายการค่าสำหรับคุณลักษณะการประมวลผลแบบมีเงื่อนไขโปรดดูเอกสารอย่างเป็นทางการ นี่คือตัวอย่างเล็ก ๆ :

<Switch>

<rectrequiredFeatures = "http://www.w3.org/tr/svg11/feature#filter"

x = "10" y = "10" ความกว้าง = "322" ความสูง = "502" ความทึบ = "0.6"

fill = "black" stroke = "none" filter = "url (#gblshadow)"/>

<rectx = "10" y = "10" ความกว้าง = "322" ความสูง = "502" ความทึบ = "0.6"

fill = "black" stroke = "none"/>

</witch>

ความหมายของตัวอย่างนี้เป็นเพียง: เบราว์เซอร์ที่ใช้รองรับคุณสมบัติตัวกรองจากนั้นวาดสี่เหลี่ยมด้านบน (พร้อมแอตทริบิวต์ตัวกรอง) หากไม่รองรับคุณสมบัติตัวกรองให้วาดสี่เหลี่ยมด้านล่าง

ในความเป็นจริงคุณแอตทริบิวต์ที่ใช้กันมากที่สุดคือ SystemLanguage ซึ่งเป็นความสามารถในการประมวลผลหลายภาษาของข้อความ ตัวอย่างเช่น:

<svgxmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1" width = "5cm" ความสูง = "5cm">

<Switch>

<textx = '10'y =' 20'SystemLanguage = "de"> de-haha </text>

<textx = '10'y =' 20'SystemLanguage = "en"> en-haha </text>

</witch>

</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/