การเพิ่มประสิทธิภาพโค้ดเป็นความต้องการชั่วนิรันดร์ของโปรแกรมเมอร์ และการใช้รูปภาพ SVG อย่างสมเหตุสมผลเพื่อแทนที่รูปภาพบางรูปใน PNG/JPG และรูปแบบอื่นๆ เป็นส่วนสำคัญของการเพิ่มประสิทธิภาพส่วนหน้า เนื่องจากเป็นการเพิ่มประสิทธิภาพ ก่อนอื่นเรามาดูที่ รูปภาพ SVG มีข้อดีอย่างไร:
SVG สามารถอ่านและแก้ไขได้ด้วยเครื่องมือมากมาย (เช่น Notepad)
ตัวอย่างรูปภาพ SVG เล็กๆ น้อยๆ:
มาดูโค้ดสำหรับไอคอนแชร์อันที่สามกัน:
<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <g stroke=#AAB0BA fill=none fill-rule=evenodd> <path d=M10 .524 3.413v8.235 stroke-linejoin=round/> <เส้นทาง d=M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>
นักเรียนที่ไม่เข้าใจ SVG จะต้องมีคำถามบนใบหน้าเหมือนกับครั้งแรกที่ฉันพบพวกเขา ไม่ต้องกังวล เรามาเริ่มจากพื้นฐานกันดีกว่า
SVG คืออะไร?SVG เป็นรูปแบบรูปภาพตามไวยากรณ์ XML และชื่อเต็มคือ Scalable Vector Graphics รูปแบบรูปภาพอื่นๆ ขึ้นอยู่กับการประมวลผลพิกเซล และ SVG คือคำอธิบายรูปร่างของรูปภาพ ดังนั้นจึงเป็นไฟล์ข้อความที่มีขนาดเล็กและจะไม่บิดเบี้ยวไม่ว่าจะขยายกี่ครั้งก็ตาม นอกจากนี้ SVG ยังเป็นมาตรฐานของ World Wide Web Consortium และ SVG ยังรวมเข้ากับมาตรฐาน W3C เช่น DOM และ XSL
วิธีการใช้งาน?ใน HTML5 คุณสามารถฝังองค์ประกอบ SVG ลงในหน้า HTML ได้โดยตรง เช่น หัวใจสีแดงเล็กๆ ด้านบน:
<ร่างกาย> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=20 height=20 viewBox=0 0 20 20> <defs> <rect id=ay=54 ความกว้าง=60 ความสูง=25 rx=1/> <mask id=bx=0 y=0 ความกว้าง=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g Transformer=translate(-9 -56) fill=none fill-rule=evenodd> <use stroke= #EDEEF mask=url(#b) ความกว้างของเส้นขีด=2 xlink:href=#a/> <เส้นทาง d=M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z fill=red/> </g> </svg></body>
โค้ด SVG ยังสามารถเขียนเป็นไฟล์ที่ลงท้ายด้วย .svg จากนั้นแทรกลงในหน้าเว็บโดยใช้แท็ก เช่น <img> , <object> , <embed> และ <iframe>
<img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>
CSS ยังสามารถใช้ svg ได้
.logo { พื้นหลัง: url(logo.svg);}ไฟล์ SVG ยังสามารถแปลงเป็นการเข้ารหัส BASE64 แล้วเขียนไปยังหน้าเว็บเป็น Data URI
<img src=data:image/svg+xml;base64,[ข้อมูล]>ไวยากรณ์ SVG
1. แท็ก <svg>
รหัส SVG ถูกวางไว้ในแท็กระดับบนสุด <svg> ด้านล่างนี้เป็นตัวอย่าง
<svg ความกว้าง=100% ความสูง=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
คุณลักษณะ width และ height ของ <svg> ระบุความกว้างและความสูงของรูปภาพ SVG ในองค์ประกอบ HTML นอกจากหน่วยสัมพัทธ์แล้ว ยังสามารถใช้หน่วยสัมบูรณ์ (หน่วย: พิกเซล) ได้อีกด้วย หากไม่ได้ระบุแอตทริบิวต์ทั้งสองนี้ ขนาดเริ่มต้นของรูปภาพ SVG คือ 300 พิกเซล (กว้าง) x 150 พิกเซล (สูง)
หากคุณต้องการแสดงเพียงบางส่วนของรูปภาพ SVG ให้ระบุแอตทริบิวต์ viewBox
<svg ความกว้าง=100 ความสูง=100 ช่องมอง=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
ค่าของแอตทริบิวต์ <viewBox> มีตัวเลขสี่ตัว ได้แก่ abscissa และลำดับของมุมซ้ายบน ความกว้างและความสูงของวิวพอร์ต ในโค้ดด้านบน รูปภาพ SVG มีขนาดกว้าง 100 พิกเซล x สูง 100 พิกเซล และแอตทริบิวต์ viewBox ระบุว่าวิวพอร์ตเริ่มต้นจากจุด (50, 50) สิ่งที่คุณเห็นจริงๆ คือวงกลมสี่วงที่มุมขวาล่าง
โปรดทราบว่าวิวพอร์ตต้องพอดีกับพื้นที่ที่วิวพอร์ตอยู่ ในโค้ดด้านบน ขนาดของวิวพอร์ตคือ 50 x 50 เนื่องจากขนาดของรูปภาพ SVG คือ 100 x 100 วิวพอร์ตจะถูกขยายให้พอดีกับขนาดของรูปภาพ SVG กล่าวคือ จะถูกขยายสี่ครั้ง .
หากคุณไม่ระบุแอตทริบิวต์ width และ height และระบุเฉพาะแอตทริบิวต์ viewBox จะเทียบเท่ากับการให้เฉพาะอัตราส่วนภาพของรูปภาพ SVG ในกรณีนี้ ขนาดเริ่มต้นของรูปภาพ SVG จะเท่ากับขนาดขององค์ประกอบ HTML ที่มีอยู่
2. แท็ก <circle>
แท็ก <circle> แสดงถึงวงกลม
<svg ความกว้าง=300 ความสูง=180> <วงกลม cx=30 cy=50 r=25 /> <วงกลม cx=90 cy=50 r=25 คลาส=สีแดง /> <วงกลม cx=150 cy=50 r=25 คลาส =แฟนซี /></svg>
โค้ดด้านบนกำหนดวงกลมสามวง คุณลักษณะ cx, cy และ r ของแท็ก <circle> คือ abscissa, ordinate และ radius ตามลำดับ และมีหน่วยเป็นพิกเซล พิกัดจะสัมพันธ์กับที่มาของมุมซ้ายบนของผืนผ้าใบ <svg>
แอตทริบิวต์คลาสใช้เพื่อระบุคลาส CSS ที่สอดคล้องกัน
.red { เติม: สีแดง;} .fancy { เติม: ไม่มี; จังหวะ: สีดำ;คุณสมบัติ CSS ของ SVG แตกต่างจากองค์ประกอบเว็บ
เติม: เติมสี
จังหวะ: สีจังหวะ
ความกว้างของเส้นขีด: ความกว้างของเส้นขอบ
3. แท็ก <line>
แท็ก <line> ใช้สำหรับวาดเส้นตรง
<svg width=300 height=180> <line x1=0 y1=0 x2=200 y2=0 style= stroke:rgb(0,0,0); stroke-width:5 /></svg>
ในโค้ดด้านบน คุณลักษณะ x1 และคุณลักษณะ y1 ของแท็ก <line> แสดงถึงพิกัดของ abscissa และพิกัดของจุดเริ่มต้นของส่วนของเส้นตรง คุณลักษณะ x2 และคุณลักษณะ y2 แสดงถึงพิกัดของ abscissa และพิกัดของจุดสิ้นสุดของ ส่วนของเส้น; แอตทริบิวต์ style แสดงถึงลักษณะของส่วนของเส้น
4. แท็ก <polyline>
แท็ก <polyline> ใช้ในการวาดรูปหลายเส้น
<svg width=300 height=180> <จุดโพลีไลน์=3,3 30,28 3,53 fill=none stroke=black /></svg>
คุณลักษณะ point ของ <polyline> ระบุพิกัดของแต่ละจุดสิ้นสุด Abscissa และ ordinate คั่นด้วยเครื่องหมายจุลภาค และจุดต่างๆ จะถูกคั่นด้วยช่องว่าง
5. แท็ก <rect>
แท็ก <rect> ใช้ในการวาดรูปสี่เหลี่ยม
<svg ความกว้าง=300 ความสูง=180> <rect x=0 y=0 ความสูง=100 ความกว้าง=200 style=จังหวะ: #70d5dd; เติม: #dd524b /></svg>
แอตทริบิวต์ x และแอตทริบิวต์ y ของ <rect> ระบุพิกัดของจุดสิ้นสุดมุมซ้ายบนของสี่เหลี่ยมผืนผ้า แอตทริบิวต์ความกว้างและความสูงระบุความกว้างและความสูง (หน่วยพิกเซล) ของสี่เหลี่ยมผืนผ้า
6. แท็ก <ellipse>
แท็ก <ellipse> ใช้ในการวาดวงรี
<svg width=300 height=180> <วงรี cx=60 cy=60 ry=40 rx=20 stroke=black stroke-width=5 fill=silver/></svg>
คุณลักษณะ cx และแอตทริบิวต์ cy ของ <ellipse> ระบุพิกัดของวงรีและพิกัดของจุดศูนย์กลางวงรี (หน่วยพิกเซล) คุณลักษณะ rx และแอตทริบิวต์ ry ระบุรัศมีของแกนตามขวางและตามยาวของวงรี (หน่วยพิกเซล)
7. แท็ก <polygon>
แท็ก <polygon> ใช้ในการวาดรูปหลายเหลี่ยม
<svg width=300 height=180> <รูปหลายเหลี่ยมเติม=เส้นสีเขียว=ความกว้างเส้นสีส้ม=1 จุด=0,0 100,0 100,100 0,100 0,0/></svg>
คุณลักษณะ point ของ <polygon> ระบุพิกัดของแต่ละจุดสิ้นสุด Abscissa และ ordinate คั่นด้วยเครื่องหมายจุลภาค และจุดต่างๆ จะถูกคั่นด้วยช่องว่าง
8. แท็ก <path>
แท็ก <path> ใช้เพื่อระบุเส้นทาง
<svg width=300 height=180><path d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></path></svg >
แอตทริบิวต์ d ของ <path> แสดงถึงลำดับการวาด ค่าของมันคือสตริงยาว
M: ย้ายไป (moveto)
L: ลากเส้นตรงไปที่ (lineto)
Z: เส้นทางปิด
9. แท็ก <text>
แท็ก <text> ใช้สำหรับวาดข้อความ
<svg width=300 height=180> <text x=50 y=25>四客足球</text></svg>
คุณลักษณะ x และ y ของ <text> แสดงถึง abscissa และลำดับของจุดเริ่มต้นของบรรทัดฐานของบล็อกข้อความ รูปแบบของข้อความสามารถระบุได้โดยใช้แอตทริบิวต์คลาสหรือสไตล์
10. แท็ก <use>
แท็ก <use> ใช้เพื่อคัดลอกรูปร่าง
<svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <ใช้ href=#myCircle x=10 y =0 เติม=สีน้ำเงิน /> <use href=#myCircle x=20 y=0 เติม=เส้นขีดสีขาว=สีน้ำเงิน /></svg>
แอตทริบิวต์ href ของ <use> ระบุโหนดที่จะคัดลอก และแอตทริบิวต์ x และแอตทริบิวต์ y เป็นพิกัดของมุมซ้ายบนของ <use> นอกจากนี้คุณยังสามารถระบุพิกัดความกว้างและความสูงได้ด้วย
11. แท็ก <g>
แท็ก <g> ใช้เพื่อจัดกลุ่มรูปร่างหลายรายการเป็นกลุ่มเพื่อให้นำมาใช้ซ้ำได้ง่าย
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>วงกลม</text> <circle cx=50 cy=50 r=20/> </g> <ใช้ href = #myCircle x=100 y=0 เติม=สีน้ำเงิน /> <use href=#myCircle x=200 y=0 เติม=เส้นขีดสีขาว=สีน้ำเงิน /></svg>
12. แท็ก <defs>
แท็ก <defs> ใช้สำหรับรูปร่างที่กำหนดเอง โค้ดภายในจะไม่แสดงและใช้สำหรับการอ้างอิงเท่านั้น
<svg ความกว้าง=300 ความสูง=100> <defs> <g id=myCircle> <text x=25 y=20>วงกลม</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 เติม=สีน้ำเงิน /> <use href=#myCircle x=200 y=0 fill=white stroke=blue /></svg>
13. แท็ก <pattern>
แท็ก <pattern> ใช้เพื่อปรับแต่งรูปร่างที่สามารถอ้างอิงถึงการเรียงต่อกันในพื้นที่ได้
<svg ความกว้าง=500 ความสูง=500> <defs> <รูปแบบ id=จุด x=0 y=0 ความกว้าง=100 ความสูง=100 patternUnits=userSpaceOnUse> <เติมวงกลม=#bee9e8 cx=50 cy=50 r=35 /> </รูปแบบ> </defs> <แก้ไข x=0 y=0 ความกว้าง=100% ความสูง=100% เติม=url(#จุด) /></svg>
ในโค้ดข้างต้น แท็ก <pattern> กำหนดวงกลมเป็นรูปแบบจุด patternUnits=userSpaceOnUse หมายความว่าความกว้างและความยาวของ <pattern> เป็นค่าพิกเซลจริง จากนั้น กำหนดโหมดนี้ให้เต็มสี่เหลี่ยมด้านล่าง
14. แท็ก <image>
แท็ก <image> ใช้สำหรับแทรกไฟล์รูปภาพ
<svg viewBox=0 0 100 100 width=100 height=100> <image xlink:href=path/to/image.jpg width=50% height=50%/></svg>
ในโค้ดด้านบน xlink:href แอตทริบิวต์ของ <image> ระบุแหล่งที่มาของรูปภาพ
15. แท็ก <animate>
แท็ก <animate> ใช้เพื่อสร้างเอฟเฟ็กต์ภาพเคลื่อนไหว
<svg width=500px height=500px> <rect x=0 y=0 width=100 height=100 fill=#feac5e> <animate objectName=x จาก=0 ถึง=500 dur=2s RepeatCount=indefinite /> </rect ></svg>
ในโค้ดด้านบน สี่เหลี่ยมจะยังคงเคลื่อนไหวและสร้างเอฟเฟกต์ภาพเคลื่อนไหว
คุณลักษณะของ <animate> มีความหมายดังต่อไปนี้
คุณลักษณะชื่อ: ชื่อของคุณลักษณะที่เกิดเอฟเฟ็กต์ภาพเคลื่อนไหว
จาก: ค่าเริ่มต้นของภาพเคลื่อนไหวเดียว
ถึง: ค่าสิ้นสุดของภาพเคลื่อนไหวเดียว
dur: ระยะเวลาของภาพเคลื่อนไหวเดียว
RepeatCount: โหมดวนรอบภาพเคลื่อนไหว
ภาพเคลื่อนไหวสามารถกำหนดได้หลายคุณสมบัติ
<แอนิเมชั่นชื่อแอตทริบิวต์=x จาก=0 ถึง=500 dur=2s RepeatCount=ไม่แน่นอน /><แอนิเมชั่นชื่อแอททริบิว=ความกว้าง ถึง=500 dur=2s RepeatCount=ไม่แน่นอน />
16. แท็ก <animateTransform>
แท็ก <animate> ไม่มีผลกับแอตทริบิวต์การแปลง CSS หากจำเป็นต้องมีการแปลง ต้องใช้แท็ก <animateTransform>
<svg width=500px height=500px> <rect x=250 y=250 width=50 height=50 fill=#4bc0c8> <animateTransformattributeName=ประเภทการแปลง=หมุนเริ่มต้น=0s dur=10s จาก=0 200 200 ถึง=360 400 400 ทำซ้ำนับ=ไม่แน่นอน /> </rect></svg>
ในโค้ดข้างต้น เอฟเฟกต์ของ <animateTransform> คือการหมุน ในขณะนี้ ค่าแอตทริบิวต์จากและถึงมีตัวเลขสามตัว ตัวเลขแรกคือค่ามุม และค่าที่สองและสามคือพิกัดของ ศูนย์การหมุน จาก=0 200 200 หมายความว่าที่จุดเริ่มต้น มุมคือ 0 และการหมุนเริ่มต้นรอบๆ (200, 200) ถึง=360 400 400 หมายความว่า ในตอนท้าย มุมคือ 360 และการหมุนเริ่มต้นรอบๆ (400 , 400)
1. การดำเนินงาน DOM
หากเขียนโค้ด SVG โดยตรงในหน้าเว็บ HTML รหัสดังกล่าวจะเป็นส่วนหนึ่งของ DOM ของหน้าเว็บและสามารถจัดการได้โดยตรงโดยใช้ DOM
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 รักษาAspectRatio=xMidYMid พบ> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
หลังจากแทรกโค้ดด้านบนลงในหน้าเว็บแล้ว คุณสามารถใช้ CSS เพื่อปรับแต่งสไตล์ได้
วงกลม { ความกว้างของเส้นขีด: 5; จังหวะ: #f00; เติม: #ff0;} วงกลม: โฮเวอร์ { จังหวะ: #090;จากนั้น SVG จะสามารถจัดการได้ด้วยโค้ด JavaScript
var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('circle คลิก - ขยาย'); mycircle.setAttribute('r', 60);}, เท็จ);โค้ดข้างต้นระบุว่าหากคลิกกราฟิก คุณลักษณะ r ขององค์ประกอบวงกลมจะถูกเขียนใหม่
2. รับ SVG DOM
ใช้แท็ก <object> , <iframe> , <embed> เพื่อแทรกไฟล์ SVG เพื่อรับ SVG DOM
var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument; var svgEmbed = document.getElementById('embed').getSVGDocument();โปรดทราบว่าหากคุณใช้แท็ก <img> เพื่อแทรกไฟล์ SVG คุณจะไม่สามารถรับ SVG DOM ได้
3. อ่านซอร์สโค้ด SVG
เนื่องจากไฟล์ SVG เป็นส่วนหนึ่งของข้อความ XML จึงสามารถอ่านซอร์สโค้ด SVG ได้โดยการอ่านโค้ด XML
<div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve width=500 ความสูง=440 > <!-- รหัส svg --> </svg></div>
ใช้เมธอด serializeToString() ของอินสแตนซ์ XMLSerializer เพื่อรับโค้ดขององค์ประกอบ SVG
var svgString = XMLSerializer ใหม่() .serializeToString(document.querySelector('svg'));4. แปลงรูปภาพ SVG เป็นรูปภาพ Canvas
ขั้นแรก คุณต้องสร้างออบเจ็กต์ Image ใหม่และกำหนดรูปภาพ SVG ให้กับแอตทริบิวต์ src ของออบเจ็กต์ Image
var img = รูปภาพใหม่ ();var svg = new Blob([svgString], {type: image/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL ||. var url = DOMURL.createObjectURL(svg);img.src = url; จากนั้น เมื่อโหลดรูปภาพแล้ว ให้วาดไปที่องค์ประกอบ <canvas>
img.onload = function () { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); สรุปSVG สามารถทำได้มากกว่านั้น เราจะอธิบายรายละเอียดเกี่ยวกับเอฟเฟกต์ภาพเคลื่อนไหวและข้อความที่สร้างโดยใช้ SVG ในภายหลัง แต่วันนี้มาหยุดที่นี่ก่อน
console.log('右下角点好看呦')ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน Script Home