SVG มีการโต้ตอบของผู้ใช้ที่ดีเช่น:
1. SVG สามารถตอบสนองต่อเหตุการณ์ DOM2 ส่วนใหญ่
2. SVG สามารถจับการเคลื่อนไหวของเมาส์ของผู้ใช้ได้ดีผ่านเคอร์เซอร์
3. ผู้ใช้สามารถบรรลุการปรับขนาดและเอฟเฟกต์อื่น ๆ ได้อย่างง่ายดายโดยการตั้งค่าของคุณสมบัติ ZoomandPan ขององค์ประกอบ SVG
4. ผู้ใช้สามารถรวมภาพเคลื่อนไหวและกิจกรรมเพื่อให้เอฟเฟกต์ที่ซับซ้อนบางอย่างได้อย่างง่ายดาย
ด้วยการแนบเหตุการณ์กับองค์ประกอบ SVG เราสามารถทำงานแบบโต้ตอบได้อย่างง่ายดายโดยใช้ภาษาสคริปต์ SVG สนับสนุนกิจกรรม DOM2 ส่วนใหญ่เช่น Onfocusin, Onfocusou, Onclick, Onmousedown, Onmouseup, Onmousemove, Onmouseout, Onload, OnResize, Onscroll และเหตุการณ์อื่น ๆ นอกจากนี้ SVG ยังมีกิจกรรมที่เกี่ยวข้องกับแอนิเมชั่นที่ไม่เหมือนใครเช่น: Onroom, Onbegin, Onend, OnRepeat ฯลฯ
ทุกคนคุ้นเคยกับเหตุการณ์ที่เกิดขึ้นดังนั้นฉันจะไม่พูดถึงเรื่องนี้
วิธีการเคลื่อนไหวSVG ใช้ข้อความเพื่อกำหนดกราฟิกและโครงสร้างเอกสารนี้เหมาะมากสำหรับการสร้างภาพเคลื่อนไหว ในการเปลี่ยนตำแหน่งขนาดและสีของรูปคุณจะต้องปรับคุณสมบัติที่สอดคล้องกันเท่านั้น ในความเป็นจริง SVG มีคุณสมบัติที่ออกแบบมาเป็นพิเศษสำหรับการประมวลผลเหตุการณ์ต่าง ๆ และหลายคนก็ปรับแต่งสำหรับภาพเคลื่อนไหว ใน SVG มีหลายวิธีในการใช้แอนิเมชั่น:
1. ใช้องค์ประกอบภาพเคลื่อนไหวของ SVG สิ่งนี้จะถูกเน้นด้านล่าง
2. ใช้สคริปต์ การใช้การดำเนินงาน DOM เพื่อเริ่มต้นและควบคุมภาพเคลื่อนไหวเป็นเทคโนโลยีที่ครบกำหนดแล้วและมีตัวอย่างเล็ก ๆ ด้านล่าง
3. SMIL (ภาษามัลติมีเดียที่ซิงโครไนซ์ซิงโครไนซ์) หากคุณสนใจโปรดดูที่: http://www.w3.org/tr/2008/rec-smil3-20081201/
ตัวอย่างต่อไปนี้รวมถึงภาพเคลื่อนไหวพื้นฐานที่สุดใน SVG :<svgViewBox = "0 0 800 300"
xmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1">
<Sc> องค์ประกอบภาพเคลื่อนไหวพื้นฐาน </sc>
<rect x = "1" y = "1"
fill = "none" stroke = "blue" stroke-width = "2" />
<!-ภาพเคลื่อนไหวของตำแหน่งและขนาดของสี่เหลี่ยมผืนผ้า->
<rect id = "rectelement" x = "300" y = "100"
fill = "RGB (255,255,0)">
<animate attributeName = "x" attributeType = "xml"
เริ่มต้น = "0s" dur = "9s" fill = "freeze" จาก = "300" ถึง = "0" />
<animate attributeName = "y" attributeType = "xml"
เริ่มต้น = "0s" dur = "9s" fill = "freeze" จาก = "100" ถึง = "0" />
<animate attributeName = "width" attributeType = "xml"
เริ่มต้น = "0s" dur = "9s" fill = "freeze" จาก = "300" ถึง = "800" />
<animate attributeName = "ความสูง" attributeType = "xml"
เริ่มต้น = "0s" dur = "9s" fill = "freeze" จาก = "100" ถึง = "300" />
</rect>
<!-สร้างพื้นที่พิกัดผู้ใช้ใหม่ดังนั้นข้อความจึงเริ่มต้นด้วยใหม่ (0,0) และการแปลงที่ตามมาสำหรับระบบพิกัดใหม่->
<g transform = "แปล (100,100)">
<!- การใช้งานต่อไปนี้ตั้งค่าเป็นทัศนวิสัยเคลื่อนไหวแล้วใช้ AnimateMotion
Animate และ AnimateTransform แสดงภาพเคลื่อนไหวประเภทอื่น ->
<text id = "textelement" x = "0" y = "0"
font-family = "verdana" font-size = "35.27" การมองเห็น = "ซ่อน">
มันยังมีชีวิตอยู่!
<set attributeName = "การมองเห็น" attributeType = "css" ถึง = "มองเห็นได้"
เริ่มต้น = "3s" dur = "6s" fill = "freeze" />>
<AnimateMotion Path = "M 0 0 L 100 100"
เริ่มต้น = "3s" dur = "6s" fill = "freeze" />>
<animate attributeName = "Fill" AttributeType = "CSS"
จาก = "RGB (0,0,255)" ถึง = "RGB (128,0,0)"
เริ่มต้น = "3s" dur = "6s" fill = "freeze" />>
<animateTransform attributeName = "transform" attributeType = "xml"
type = "หมุน" จาก = "-30" ถึง = "0"
เริ่มต้น = "3s" dur = "6s" fill = "freeze" />>
<animateTransform attributeName = "transform" attributeType = "xml"
type = "scale" จาก = "1" ถึง = "3" เพิ่มเติม = "sum"
เริ่มต้น = "3s" dur = "6s" fill = "freeze" />>
</text>
</g>
</svg>
ใส่รหัสนี้ลงในเนื้อหาของเอกสาร HTML และเรียกใช้เพื่อทราบผลกระทบของภาพเคลื่อนไหว
คุณสมบัติสาธารณะขององค์ประกอบภาพเคลื่อนไหว หมวดที่ 1: ระบุองค์ประกอบและแอตทริบิวต์เป้าหมายxlink: href
สิ่งนี้ควรคุ้นเคยมากชี้ไปที่องค์ประกอบที่ดำเนินการกับภาพเคลื่อนไหว องค์ประกอบนี้จะต้องกำหนดในส่วนเอกสาร SVG ปัจจุบัน หากไม่ได้ระบุแอตทริบิวต์นี้ภาพเคลื่อนไหวจะถูกนำไปใช้กับองค์ประกอบหลัก
attributeName = <attributeName>
คุณสมบัตินี้ระบุคุณสมบัติในการใช้แอนิเมชั่น หากคุณสมบัตินี้มีเนมสเปซ (อย่าลืม SVG เป็นเอกสาร XML เป็นหลัก) ควรเพิ่มเนมสเปซนี้ด้วย ตัวอย่างเช่นในตัวอย่างต่อไปนี้ Xlink จะได้รับนามแฝงที่แตกต่างกัน ที่นี่เมื่อ Animate ระบุแอตทริบิวต์จะรวมเนมสเปซไว้ด้วย:
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg"
xmlns: xlink = "http://www.w3.org/1999/xlink">
<title> การสาธิตความละเอียดของเนมสเปซสำหรับแอนิเมชั่น </title>
<g xmlns: a = "http://www.w3.org/1999/xlink">
<animate attributeName = "a: href" xlink: href = "#foo" dur = "2s" ถึง = "two.png" fill = "freeze"
</g>
<g xmlns: b = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">
<image xml: id = "foo" b: href = "one.png" x = "35" y = "50"/>
</g>
</svg>
AttributeType = CSS | XML | อัตโนมัติ (ค่าเริ่มต้น)
คุณสมบัตินี้ระบุเนมสเปซที่มีค่าคุณสมบัติ ความหมายของค่าเหล่านี้มีดังนี้:
CSS: แอตทริบิวต์ที่ระบุในนามของ AttributeName คือแอตทริบิวต์ CSS
XML: แอตทริบิวต์ที่ระบุโดย AttributeName เป็นแอตทริบิวต์ภายใต้เนมสเปซเริ่มต้นของ XML (โปรดทราบว่าเอกสาร SVG เป็นเอกสาร XML เป็นหลัก)
อัตโนมัติ: มันหมายถึงการค้นหาแอตทริบิวต์ที่ระบุโดย AttributeName ในแอตทริบิวต์ CSS ก่อน หากไม่พบมันจะค้นหาแอตทริบิวต์ภายใต้เนมสเปซ XML เริ่มต้น
หมวดที่ 2: ควบคุมแอตทริบิวต์ของเวลาภาพเคลื่อนไหวคุณสมบัติต่อไปนี้คือแอตทริบิวต์เวลาแอนิเมชั่น พวกเขาควบคุมไทม์ไลน์ของการทำงานของแอนิเมชั่นรวมถึงวิธีการเริ่มต้นและสิ้นสุดภาพเคลื่อนไหวไม่ว่าจะเป็นภาพเคลื่อนไหวซ้ำ ๆ ซ้ำ ๆ ไม่ว่าจะเป็นภาพเคลื่อนไหว ฯลฯ ฯลฯ
เริ่มต้น = รายการเริ่มต้น
คุณสมบัตินี้กำหนดเวลาเริ่มต้นของแอนิเมชั่น มันอาจเป็นชุดของค่าเวลาที่คั่นด้วยเครื่องหมายอัฒภาค นอกจากนี้ยังสามารถเป็นค่าอื่น ๆ ที่กระตุ้นการเริ่มต้นของแอนิเมชั่น ตัวอย่างเช่นเหตุการณ์คีย์ลัด ฯลฯ
DUR = ค่านาฬิกา | สื่อ | ไม่มีกำหนด
กำหนดระยะเวลาของภาพเคลื่อนไหว สามารถตั้งค่าเป็นค่าที่แสดงในรูปแบบนาฬิกา นอกจากนี้ยังสามารถตั้งค่าเป็นสองค่าต่อไปนี้:
สื่อ: ระบุว่าเวลาของภาพเคลื่อนไหวคือระยะเวลาขององค์ประกอบมัลติมีเดียภายใน
ไม่ จำกัด : ระบุเวลาแอนิเมชั่นที่จะไม่มีที่สิ้นสุด
รูปแบบนาฬิกาหมายถึงรูปแบบมูลค่าทางกฎหมายต่อไปนี้:
: 30: 03 = 2 ชั่วโมง 30 นาทีและ 3 วินาที
: 00: 10.25 = 50 ชั่วโมง 10 วินาทีและ 250 ล้านวินาที
: 33 = 2 นาทีและ 33 วินาที
: 10.5 = 10.5 วินาที = 10 วินาทีและ 500 ล้านวินาที
.2H = 3.2 ชั่วโมง = 3 ชั่วโมงและ 12 นาที
ขั้นต่ำ = 45 นาที
s = 30 วินาที
MS = 5 ล้านวินาที
.467 = 12 วินาทีและ 467 ล้านวินาที
.5S = 500 ล้านวินาที
: 00.005 = 5 ล้านวินาที
end = end-value-list
กำหนดเวลาสิ้นสุดของแอนิเมชั่น สามารถเป็นชุดของค่าคั่นด้วยเครื่องหมายอัฒภาค
min = ค่านาฬิกา | สื่อ
สูงสุด = ค่านาฬิกา | สื่อ
ตั้งค่าสูงสุดและค่าต่ำสุดของระยะเวลาภาพเคลื่อนไหว
รีสตาร์ท = เสมอ | เมื่อไม่มีการเคลื่อนไหว | ไม่เคย
ตั้งค่าภาพเคลื่อนไหวเพื่อเริ่มต้นใหม่ได้ตลอดเวลา หมายความว่าภาพเคลื่อนไหวสามารถเริ่มต้นได้ตลอดเวลา เมื่อไม่ใช้วิธีหมายความว่าคุณสามารถเริ่มต้นใหม่ได้เมื่อไม่มีการเล่นเช่นการเล่นก่อนหน้านี้สิ้นสุดลง ไม่เคยหมายความว่าแอนิเมชั่นไม่สามารถเริ่มต้นได้อีกครั้ง
repeatCount = ค่าตัวเลข | ไม่มีกำหนด
ตั้งค่าจำนวนครั้งที่ภาพเคลื่อนไหวซ้ำแล้วซ้ำอีก ไม่ จำกัด หมายถึงการทำซ้ำที่ไม่มีที่สิ้นสุด
repeetdur = นาฬิกา-ค่า | ไม่มีกำหนด
ตั้งค่าเวลาแอนิเมชั่นทั้งหมดของการทำซ้ำ ไม่ จำกัด หมายถึงการทำซ้ำที่ไม่มีที่สิ้นสุด
เติม = Freeze | ลบ (ค่าเริ่มต้น)
ตั้งค่าสถานะขององค์ประกอบหลังจากแอนิเมชั่นเสร็จสิ้น Freeze หมายความว่าองค์ประกอบจะอยู่ในสถานะสุดท้ายของแอนิเมชั่นหลังจากแอนิเมชั่นสิ้นสุดลง ลบหมายความว่าองค์ประกอบจะกลับสู่สถานะก่อนที่ภาพเคลื่อนไหวหลังจากสิ้นสุดภาพเคลื่อนไหวซึ่งเป็นค่าเริ่มต้น
หมวดที่ 3: กำหนดคุณลักษณะของค่าภาพเคลื่อนไหว
คุณสมบัติเหล่านี้กำหนดค่าของคุณสมบัติที่ดำเนินการ ในความเป็นจริงอัลกอริทึมบางอย่างที่กำหนด keyframes และการแก้ไข
calcmode = ไม่ต่อเนื่อง | เชิงเส้น (ค่าเริ่มต้น) | เดินไป | มีเส้นโค้ง
กำหนดวิธีการแก้ไขภาพเคลื่อนไหว: ไม่ต่อเนื่อง: ไม่ต่อเนื่องไม่มีการแก้ไข; เชิงเส้น: การแก้ไขเชิงเส้น; paced: การแก้ไขขนาดขั้นตอน; Spline: การแก้ไขเส้นโค้ง ค่าเริ่มต้นคือเชิงเส้น (การแก้ไขเชิงเส้น) แต่หากแอตทริบิวต์ไม่รองรับการแก้ไขเชิงเส้นจะใช้การแก้ไขแบบไม่ต่อเนื่อง
values = <list>
กำหนดรายการค่าสำหรับคีย์เฟรมแอนิเมชั่นคั่นด้วยเครื่องหมายอัฒภาค สนับสนุนค่าเวกเตอร์
keytimes = <list>
กำหนดรายการเวลาของคีย์เฟรมแอนิเมชั่นคั่นด้วยเครื่องหมายอัฒภาค สิ่งนี้สอดคล้องกับค่าหนึ่งทีละหนึ่ง ค่านี้ได้รับผลกระทบจากอัลกอริทึมการแก้ไข หากเป็นการแก้ไขเชิงเส้นและเส้นโค้งค่าแรกของ keytimes จะต้องเป็น 0 และค่าสุดท้ายจะต้องเป็น 1. สำหรับการไม่ต่อเนื่องแบบไม่ต่อเนื่องค่าแรกของ keytimes จะต้องเป็น 0 สำหรับการแก้ไขขนาดขั้นตอนจะเห็นได้ชัดว่าคีย์ต้องไม่จำเป็น และหากระยะเวลาของแอนิเมชั่นถูกตั้งค่าเป็นไม่ จำกัด คีย์จะถูกละเว้น
keysplines = <list>
คุณสมบัตินี้กำหนดจุดควบคุมเมื่อการแก้ไข spline (การแก้ไข betzel) และเห็นได้ชัดว่าทำงานได้ก็ต่อเมื่อโหมดการแก้ไขถูกเลือกเป็น spline ค่าในรายการนี้อยู่ในช่วงตั้งแต่ 0 ถึง 1
จาก = <value>
เป็น = <value>
โดย = <value>
กำหนดค่าเริ่มต้นสิ้นสุดและขั้นตอนของแอตทริบิวต์แอนิเมชั่น หมายเหตุที่นี่: หากค่าได้กำหนดค่าที่เกี่ยวข้องแล้วจากค่าใด ๆ จาก/ถึง/โดยค่าจะถูกละเว้น
หมวดที่ 4: การควบคุมว่าภาพเคลื่อนไหวเป็นแอตทริบิวต์ที่เพิ่มขึ้นบางครั้งมันมีประโยชน์มากในการตั้งค่าที่เกี่ยวข้องแทนค่าสัมบูรณ์ แต่ค่าที่เพิ่มขึ้นโดยใช้คุณสมบัติเพิ่มเติมสามารถบรรลุเป้าหมายนี้ได้
additive = แทนที่ (ค่าเริ่มต้น) | ผลรวม
คุณสมบัตินี้ควบคุมว่าภาพเคลื่อนไหวเพิ่มขึ้นหรือไม่ ผลรวมหมายความว่าภาพเคลื่อนไหวจะมีค่าแอตทริบิวต์ที่เกี่ยวข้องมากขึ้นหรือภาพเคลื่อนไหวลำดับความสำคัญต่ำอื่น ๆ แทนที่เป็นค่าเริ่มต้นซึ่งระบุว่าภาพเคลื่อนไหวจะเขียนทับค่าแอตทริบิวต์ที่เกี่ยวข้องหรือภาพเคลื่อนไหวลำดับความสำคัญต่ำอื่น ๆ ดูตัวอย่างเล็ก ๆ :
<rect ... >
<animate attributeName = "width" จาก = "0px" ถึง = "10px" dur = "10s"
additive = "sum"/>
</rect>
ตัวอย่างนี้แสดงให้เห็นถึงเอฟเฟกต์ภาพเคลื่อนไหวของความกว้างสี่เหลี่ยมที่เพิ่มขึ้น
บางครั้งมันก็มีประโยชน์มากหากผลลัพธ์ภาพเคลื่อนไหวซ้ำ ๆ ถูกซ้อนทับและการใช้คุณสมบัติสะสมสามารถบรรลุเป้าหมายนี้ได้
สะสม = ไม่มี (ค่าเริ่มต้น) | ผลรวม
คุณสมบัตินี้ควบคุมว่าเอฟเฟกต์ภาพเคลื่อนไหวนั้นสะสมหรือไม่ ไม่มีค่าเริ่มต้นซึ่งระบุว่าภาพเคลื่อนไหวที่ซ้ำกันไม่ได้สะสม ผลรวมหมายความว่าเอฟเฟกต์ภาพเคลื่อนไหวซ้ำ ๆ จะถูกสะสม สำหรับแอนิเมชั่นที่มีการเปิดเผยเพียงครั้งเดียวคุณสมบัตินี้ไม่มีความหมาย ดูตัวอย่างเล็ก ๆ :
<rect ... >
<animate attributeName = "width" จาก = "0px" ถึง = "10px" dur = "10s"
เพิ่มเติม = "sum" สะสม = "sum" repeatCount = "5"/>
</rect>
ตัวอย่างนี้แสดงให้เห็นว่าความยาวของสี่เหลี่ยมเพิ่มขึ้นในการวนซ้ำแต่ละครั้ง
สรุปองค์ประกอบภาพเคลื่อนไหวSVG จัดเตรียมองค์ประกอบภาพเคลื่อนไหวต่อไปนี้:
1. องค์ประกอบเคลื่อนไหวนี่คือองค์ประกอบภาพเคลื่อนไหวพื้นฐานที่สุดซึ่งสามารถให้ค่าของจุดเวลาที่แตกต่างกันโดยตรงสำหรับแอตทริบิวต์ที่เกี่ยวข้อง
2. กำหนดองค์ประกอบนี่คือตัวย่อขององค์ประกอบเคลื่อนไหวและรองรับแอตทริบิวต์ทุกประเภทโดยเฉพาะอย่างยิ่งเมื่อแอตทริบิวต์เคลื่อนไหว (เช่นการมองเห็น) องค์ประกอบที่ตั้งไว้นั้นไม่ใช่การสร้างและแอตทริบิวต์ที่เกี่ยวข้องนั้นไม่ถูกต้อง ประเภทค่าสุดท้ายของภาพเคลื่อนไหวที่ระบุจะต้องสอดคล้องกับประเภทค่าของแอตทริบิวต์
3. องค์ประกอบ animatemotionองค์ประกอบแอนิเมชั่น LU Jin คุณสมบัติส่วนใหญ่ขององค์ประกอบนี้เหมือนกับข้างต้นโดยมีความแตกต่างที่แตกต่างกันเล็กน้อยต่อไปนี้เท่านั้น:
calcmode = ไม่ต่อเนื่อง | เส้นตรง เดินไป | มีเส้นโค้ง
ค่าเริ่มต้นของคุณสมบัตินี้แตกต่างกันและค่าเริ่มต้นในองค์ประกอบนี้เป็นไปตาม
path = <path-data>
เส้นทางของการเคลื่อนที่ขององค์ประกอบภาพเคลื่อนไหวนั้นเหมือนกับรูปแบบของค่าของแอตทริบิวต์ D ขององค์ประกอบ PATH
Keypoints = <list-of-numbers>
ค่าของคุณสมบัตินี้คือชุดของค่าจุดลอยตัวที่กำหนดโดยเครื่องหมายอัฒภาคและช่วงค่าของแต่ละค่าคือ 0 ~ 1 ค่าเหล่านี้แสดงถึงระยะทางที่จุดเวลาที่สอดคล้องกันถูกย้ายที่ระบุโดยแอตทริบิวต์ keytimes ระยะทางเฉพาะที่นี่จะถูกกำหนดโดยเบราว์เซอร์เอง
rotate = <gumber> | อัตโนมัติ การย้อนกลับโดยอัตโนมัติ
คุณสมบัตินี้ระบุมุมที่องค์ประกอบหมุนเมื่อมันเคลื่อนที่ ค่าเริ่มต้นคือ 0 ตัวเลขแสดงถึงมุมการหมุนและอัตโนมัติแสดงถึงร่างกายของสัตว์ที่หมุนไปในทิศทางของแรงถนน การย้อนกลับอัตโนมัติหมายถึงทิศทางที่พวงมาลัยอยู่ตรงข้ามกับทิศทางของการเคลื่อนไหว
นอกจากนี้ค่าขององค์ประกอบ animateMotion จาก, โดย, ถึง, ค่าประกอบด้วยคู่พิกัด; ค่า x และค่า y จะถูกคั่นด้วยเครื่องหมายจุลภาคหรือช่องว่างและคู่พิกัดแต่ละคู่จะคั่นด้วยเครื่องหมายอัฒภาคเช่นจาก = 33, 15 ซึ่งหมายความว่าพิกัดจุดเริ่มต้นคือ 33 และพิกัด Y คือ 15
มีสองวิธีในการระบุเส้นทางการเคลื่อนไหว: หนึ่งคือการกำหนดค่าโดยตรงให้กับแอตทริบิวต์ PATH และอีกวิธีหนึ่งคือการระบุเส้นทางที่จะใช้องค์ประกอบ MPATH เป็นองค์ประกอบเด็กของ AnimateMotionDe หากคุณใช้ทั้งสองวิธีองค์ประกอบ MPATH มีความสำคัญสูง ทั้งสองวิธีมีลำดับความสำคัญสูงกว่าค่าจาก, โดย, ถึง
ดูตัวอย่างเล็ก ๆ :
<? xml version = "1.0" standalone = "ไม่"?>
<! doctype svg public "-// w3c // dtd svg 1.1 // en"
"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
<svgViewBox = "0 0 500 300"
xmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.1"
xmlns: xlink = "http://www.w3.org/1999/xlink">
<rect x = "1" y = "1"
fill = "none" stroke = "blue" stroke-width = "2" />
<path id = "path1" d = "M100,250 C 100,50 400,50 400,250"
fill = "none" stroke = "blue" stroke-width = "7.06"/>
<circle cx = "100" cy = "250" r = "17.64" fill = "blue"/>>>>> >>
<circle cx = "250" cy = "100" r = "17.64" fill = "blue"/>>>>> >>
<circle cx = "400" Cy = "250" r = "17.64" fill = "blue"/>>>>
<path d = "M-25, -12.5 L25, -12.5 L 0, -87.5 z"
fill = "yellow" stroke = "red" stroke-width = "7.06">
<animateMotion dur = "6s" repeatCount = "indefinite" rotate = "auto">
<mpath xlink: href = "#path1"/>
</animatemotion>
</path>
</svg>
4. องค์ประกอบ animatecolorองค์ประกอบภาพเคลื่อนไหวสี นี่เป็นองค์ประกอบที่ล้าสมัยและโดยทั่วไปฟังก์ชั่นทั้งหมดสามารถแทนที่ด้วยการเคลื่อนไหวดังนั้นอย่าใช้มัน
5. องค์ประกอบ animateTransformเปลี่ยนองค์ประกอบแอนิเมชั่น ดูคุณสมบัติพิเศษบางอย่าง:
ประเภท = แปล | มาตราส่วน | หมุน skewx | เบียดเสียด
คุณสมบัตินี้ระบุประเภทของการแปลงและแปลเป็นค่าเริ่มต้น
ค่าจาก, โดยและเพื่อให้สอดคล้องกับพารามิเตอร์ของการแปลงซึ่งสอดคล้องกับการเปลี่ยนแปลงที่กล่าวถึงข้างต้น ค่าเป็นชุดของค่าที่คั่นด้วยเครื่องหมายอัฒภาค
องค์ประกอบและคุณสมบัติที่สนับสนุนเอฟเฟกต์ภาพเคลื่อนไหว
โดยทั่วไปองค์ประกอบกราฟิกทั้งหมด (เส้นทาง, rect, วงรี, ข้อความ, ภาพ, ภาพ ... ) และองค์ประกอบคอนเทนเนอร์ (SVG, G, defs, ใช้, สวิตช์, Clippath, หน้ากาก ... ) สนับสนุนภาพเคลื่อนไหว โดยทั่วไปคุณสมบัติส่วนใหญ่สนับสนุนเอฟเฟกต์ภาพเคลื่อนไหว สำหรับคำแนะนำโดยละเอียดโปรดดูเอกสารอย่างเป็นทางการ
ใช้แอนิเมชั่นโดยใช้ DOMแอนิเมชั่น SVG สามารถทำได้โดยใช้สคริปต์ เนื้อหาโดยละเอียดของ DOM จะถูกนำมาใช้ในภายหลัง นี่คือตัวอย่างสั้น ๆ :
<? xml version = "1.0" standalone = "ไม่"?>
<! doctype svg public "-// w3c // dtd svg 1.1 // en"
"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
<svg viewbox = "0 0 400 200"
xmlns = "http://www.w3.org/2000/svg"
onload = "startanimation (evt)" เวอร์ชัน = "1.1">
<script type = "application/ecmascript"> <! [cdata [
var timevalue = 0;
var timer_increment = 50;
var max_time = 5000;
var text_element;
ฟังก์ชั่น startanimation (evt) {
text_element = evt.target.ownerDocument.getElementById ("textelement");
showandgrowelement ();
-
ฟังก์ชั่น showandgrowelement () {
timevalue = timevalue + timer_increment;
if (timevalue> max_time)
กลับ;
// สเกลสตริงข้อความค่อยๆจนกว่าจะใหญ่กว่า 20 เท่า
scaleFactor = (timevalue * 20. ) / max_time;
text_element.setAttribute ("transform", "scale (" + scalefactor + ")");
// ทำให้สตริงทึบแสงมากขึ้น
opacityFactor = timeValue/max_time;
text_element.setAttribute ("ความทึบ", opacityfactor);
// โทร showandGrowElement อีกครั้ง <Timer_increment> หลายล้านคนในภายหลัง
settimeout ("showandgrowelement ()", timer_increment)
-
window.showandGrowelement = showandGrowelement
]]> </script>
<rect x = "1" y = "1"
fill = "none" stroke = "blue" stroke-width = "2"/>
<g transform = "แปล (50,150)" fill = "red" font-size = "7">
<text id = "textelement"> svg </text>
</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/
เทคโนโลยีภาพเคลื่อนไหว SVG: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx