สำรวจ SVG ตอนที่ 2
การปรับแต่งขั้นสูงของ SVG
การจัดกลุ่ม คำจำกัดความ การไล่ระดับสี
สวัสดีเพื่อนๆ จากบทความก่อนหน้านี้ของฉัน เราได้เห็นวิธีสร้างรูปทรงพื้นฐานโดยใช้ SVG แล้ว การขยายรูปทรงพื้นฐานเหล่านี้จะทำให้สามารถสร้างความคิดสร้างสรรค์ SVG ของคุณเองได้ ในบทความนี้ เราจะมาพูดคุยถึงวิธีทำให้ความคิดสร้างสรรค์ SVG ชาญฉลาดและง่ายดายด้วยความช่วยเหลือจากการจัดกลุ่มและคำจำกัดความ
ด้วยความช่วยเหลือของการจัดกลุ่มและคำจำกัดความ ทำให้สามารถจัดกลุ่มชุดองค์ประกอบ SVG ได้ ซึ่งจะช่วยนำกลุ่มกลับมาใช้ใหม่หรือใช้คุณสมบัติทั่วไปกับกลุ่ม — มาดูแนวคิดเชิงลึกเบื้องหลังการจัดกลุ่มและคำจำกัดความกัน
ก่อนหน้านั้น ฉันขอย้ำอีกครั้ง หากคุณไม่มีความคิดเกี่ยวกับสิ่งที่เกิดขึ้นบน SVG หรือวิธีการวาดรูปร่าง SVG พื้นฐาน ฉันขอแนะนำเป็นอย่างยิ่ง โปรดอ่านบทความก่อนหน้าของฉัน “ทุกสิ่งที่คุณต้องรู้เกี่ยวกับรูปร่าง SVG” และมา กลับไปที่นี่
การจัดกลุ่ม
สามารถจัดกลุ่มชุดขององค์ประกอบ SVG ลงในคอนเทนเนอร์ได้ด้วยความช่วยเหลือขององค์ประกอบ ‹g›‹/g› ข้อดีของการจัดกลุ่มคือสามารถนำคุณสมบัติไปใช้กับกลุ่มได้เพื่อให้สะท้อนถึงองค์ประกอบภายในกลุ่มได้ ข้อดีอีกประการของการจัดกลุ่มคือสามารถนำกลุ่มกลับมาใช้ใหม่ได้ง่ายมาก ซึ่งหมายความว่าสามารถสร้างชุดองค์ประกอบที่จัดกลุ่มซ้ำเพื่อให้คุณสามารถข้ามการทำซ้ำโค้ดได้
มาทำความเข้าใจการจัดกลุ่มด้วยตัวอย่างบางส่วนกัน
ที่นี่ฉันวาดใบไม้ติดกับก้านใบ มีคำจำกัดความของเส้นทางสองแบบอยู่ที่นี่ อันหนึ่งสำหรับใบไม้และอีกอันหนึ่งสำหรับก้านใบ ฉันจัดกลุ่มคำจำกัดความของเส้นทางทั้งสองนั้น และตั้งชื่อให้กลุ่มทั้งหมดที่เรียกว่า "leaf"
นี่คือวิธีการสร้างกลุ่มพื้นฐาน ตอนนี้ค้นหาว่าจะทำอย่างไรกับกลุ่มนี้
องค์ประกอบ 'กลุ่ม' รองรับชุดคุณลักษณะจำนวนมาก ค่าที่เปลี่ยนแปลงในคุณลักษณะเหล่านี้ส่งผลให้มีองค์ประกอบกลุ่ม มาดูหลักๆ บ้างที่ใช้คุณลักษณะในกลุ่มบ่อยๆ
เติม
โดยปกติจะใช้การเติมเพื่อเติมสีองค์ประกอบทั้งกลุ่ม นอกจากนี้ ยังสามารถแทนที่การเติมระดับกลุ่มได้ด้วยการเพิ่มแอตทริบิวต์การเติมสำหรับแต่ละองค์ประกอบ
นี่คือผลลัพธ์สำหรับสคริปต์ด้านบน
ในตัวอย่างข้างต้น คุณจะเห็นว่าในเส้นทางใบไม้ไม่มีแอตทริบิวต์การเติม แต่สำหรับเส้นทางของก้านใบ จะแทนที่สีเขียวเข้ม (#388E3C) ดังนั้นในผลลัพธ์ คุณจะเห็นว่าทั้งกลุ่มถูกแทนที่ด้วยการเติมแบบกลุ่ม (#de3e3e) แต่การเติมไม่ได้ใช้กับส่วนที่ถูกแทนที่ ซึ่งก็คือก้านใบ
สี
สีแอตทริบิวต์มีไว้เพื่อ การกำหนดสี คุณลักษณะนี้จะไม่ถูกนำไปใช้กับองค์ประกอบย่อยโดยตรง หากต้องการใช้สีที่กำหนด ให้ตั้งค่าเป็น 'currentcolor' สำหรับแอตทริบิวต์ เช่น การเติม เส้นขีด สีหยุด และสีอ่อน เพื่อแทนที่ค่าสีที่กำหนดให้กับแอตทริบิวต์
มาดูกันว่าสีทำงานอย่างไรโดยใช้ตัวอย่างบางส่วน
ที่นี่ผลลัพธ์ค่อนข้างคล้ายกับผลลัพธ์ของตัวอย่างก่อนหน้า
ในตัวอย่าง คุณจะเห็นว่าในกลุ่มได้กำหนดสี (#de3e3e) ด้วยความช่วยเหลือของแอตทริบิวต์สี สามารถใช้สีนั้นกับแอตทริบิวต์องค์ประกอบกลุ่มที่เติมด้วยชื่อ 'currentcolor' มันจะแทนที่ค่า 'currentcolor' ด้วยคำจำกัดความแอตทริบิวต์สี
ความทึบ
ใช้สำหรับปรับความทึบขององค์ประกอบย่อยของกลุ่ม
โรคหลอดเลือดสมองและโรคหลอดเลือดสมอง Dasharray
นี่เป็นการปรับคุณสมบัติที่เกี่ยวข้องกับจังหวะสำหรับองค์ประกอบกลุ่ม
เรามาดูตัวอย่างกันดีกว่า
นี่คือผลลัพธ์ที่สมบูรณ์สำหรับข้อมูลโค้ดด้านบน
ในตัวอย่างข้างต้น มีการใช้เส้นขีดสีม่วงที่มีความกว้าง 3 และทำให้เป็นเส้นประที่มีรูปแบบ 6 2 เส้นประหมายถึง 6px แรกที่บรรทัดแสดง และ 2px ถัดไปบรรทัดจะถูกซ่อน
แปลง
ตอนนี้เรากำลังก้าวไปสู่คุณสมบัติที่สำคัญและมีประโยชน์ที่สุดขององค์ประกอบ SVG การแปลงไม่ได้เป็นเพียงแอตทริบิวต์กลุ่มเท่านั้น แต่ยังใช้กับองค์ประกอบต่างๆ ได้ด้วย ด้วยความช่วยเหลือของการแปลงทำให้สามารถทำการแปลงองค์ประกอบหรือกลุ่มต่างๆ ได้ เช่น การหมุน การแปลหรือการแทนที่ การเอียง และมาตราส่วน เราจะมาหารือเกี่ยวกับการดำเนินการแต่ละอย่างโดยละเอียด
แปลภาษา
การแปลใช้เพื่อแทนที่ แปลยอมรับค่าแกน x สองพารามิเตอร์และค่าแกน y เสริม ขึ้นอยู่กับค่าที่กำหนดให้กับฟังก์ชันการแปล ค่านั้นจะแทนที่เพิ่มเติมด้วยค่าแกน x และ y
Syntax: translate(<x> [<y>]) x new position = x old position+ <x> y new position= y old position+ <y>
ลองใช้การแปลกับตัวอย่างใบไม้ของเรา
ในตัวอย่างข้างต้น กลุ่ม 'ลีฟ' แปล 500 หน่วยจากตำแหน่งจริงของเขาโดยตรง นี่เป็นเพราะการเรียกการเปลี่ยนแปลง translate(500,0)
มาตราส่วน
ใช้สำหรับเปลี่ยนขนาดของกลุ่มหรือองค์ประกอบ ยอมรับตัวเลขสองตัว x ตัวประกอบสเกลและตัวประกอบสเกล y หากไม่ได้ระบุค่าสำหรับ y จะถือว่าค่าทั้งสองมีค่าเท่ากัน
Syntax: scale(<x> [<y>]) Here <x> — Scaling factor for x-axis. <y> — Scaling factor for y-axis.
มาดูกันว่าการเปลี่ยนแปลงขนาดทำงานอย่างไรในตัวอย่างใบไม้ของเรา
ในตัวอย่างข้างต้น ฉันใช้การแปลงสองครั้งกับลีฟของกลุ่ม อย่างแรกคือฉันแปลตำแหน่งเป็น 500 หน่วย (ซึ่งเราเห็นในตัวอย่างก่อนหน้านี้) และใช้ตัวประกอบสเกล x และ y เป็น 0.5 ซึ่งจะลดขนาดของใบไม้ลงครึ่งหนึ่ง
หมุน
Rotate ใช้สำหรับการหมุนองค์ประกอบหรือกลุ่ม ฟังก์ชันหมุนยอมรับการเข้าถึงการหมุนตามด้วยจุดหมุนเสริม
Syntax: rotate(<a> [<x> <y>]) Here <a> — rotating angle <x> — x-axis displacement for the rotation point <y> — y-axis displacement for the rotation point
เรามาดูตัวอย่างกันดีกว่า
ในตัวอย่างข้างต้น จะใช้การแปลงแบบหมุน 30 องศาที่จุด (0,450) ส่งผลให้กลุ่มใบไม้ทั้งหมดหมุน 30 องศาตามจุด (0,450)
SkewX และ SkewY
ฟังก์ชันเหล่านี้ใช้สำหรับเอียงแกน x หรือ y ด้วยมุม
Syntax: skewX(<a>)//skew along the x-axis by a degree skewY(<a>)//skew along the y-axis by a degree
เรามาลองวิธีเอียงสี่เหลี่ยมบนแกน x และ y กัน
ต่อไปนี้แสดงรูปสี่เหลี่ยมผืนผ้าสองรูป รูปหนึ่งเอียงบนแกน x 10 องศา และอีกรูปหนึ่งเอียงบนแกน y 10 องศา
เมทริกซ์
ด้วยความช่วยเหลือของฟังก์ชันเมทริกซ์ ทำให้สามารถรวมการดำเนินการข้างต้นทั้งหมดเข้าด้วยกันได้ แต่มันไม่ง่ายเลย มันยากนิดหน่อยเมื่อเทียบกับการเปลี่ยนแปลงข้างต้น
เมทริกซ์จะเป็นเมทริกซ์ขนาด 3X3 มีลักษณะดังนี้
a c e b d f -----> matrix(a,b,c,d,e,f) 0 0 1
แถวล่างของเมทริกซ์จะเหมือนกันเสมอ ดังนั้นในฟังก์ชันเมทริกซ์ SVG จะยอมรับเฉพาะค่า 6 ค่าของสองแถวแรกเท่านั้น ด้วยการเปลี่ยนค่าของพารามิเตอร์ทั้ง 6 ตัวนี้ จึงสามารถทำการเปลี่ยนแปลงทุกประเภทที่เราได้กล่าวถึงไปแล้ว
ต่อไปนี้เป็นวิธีการใช้การแปลงเหล่านั้นในเปอร์สเปคทีฟเมทริกซ์
Translate
0 0 tx
0 1 ty
0 0 1
Syntax: matrix(1,0,0,1,tx,ty)
Rotate
cos(a) -sin(a) 0
sin(a) cos(a) 0
0 0 1
Syntax: matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
Scale
sx 0 0
0 sy 0
0 0 1
Syntax: matrix(sx,0,0,sy,0,0)
SkewX
1 tan(a) 0
0 1 0
0 0 1
Syntax: matrix(1,0,tan(a),1,0,0)
SkewY
Skew
1 0 0
tan(a) 1 0
0 0 1
Syntax: matrix(1,tan(a),0,1,0,0)
มาดูตัวอย่างของการแปลงเมทริกซ์กัน
ในตัวอย่างข้างต้น ตรรกะเบื้องหลังเมทริกซ์คือการหมุนกลุ่ม 30 องศา และแปลกลุ่มไปทางขวา 400 หน่วย 0.5 คือค่า sin ของ 30 และ 0.866 คือค่า cos ของ 30 ปัญหาหลักของการแปลงเมทริกซ์คือการทำความเข้าใจและการนำตรรกะของเมทริกซ์ไปใช้นั้นซับซ้อนเล็กน้อยเมื่อเทียบกับการแปลงแบบอื่น
การจัดกลุ่มสามารถนำมาใช้ซ้ำได้
ข้อดีประการหนึ่งของการจัดกลุ่มคือสามารถนำกลุ่มกลับมาใช้ใหม่ได้ เพื่อที่คุณจะได้ไม่ต้องการเขียนกลุ่มใหม่อีกครั้ง สามารถสร้างกลุ่มที่ซ้ำกันและสามารถนำการเปลี่ยนแปลงต่างๆ ไปใช้กับกลุ่มได้ โดยทำผ่านแท็ก ‹use›
มาดูกันว่าการนำกลับมาใช้ใหม่ทำงานอย่างไรในกลุ่มพร้อมตัวอย่างบางส่วน
ในตัวอย่างโค้ดข้างต้น จะมีการสร้างกลุ่มที่เรียกว่า "two-leaf" โดยการรวมกลุ่ม "leaf" และการสะท้อนของกลุ่ม การสะท้อนถูกสร้างขึ้นโดยใช้แท็ก นอกจากนี้ยังนำกลุ่ม "สองใบ" มาใช้ซ้ำและสร้างใบไม้เพิ่มเติมอีกสองชั้น
คำนิยาม
คำจำกัดความนี้ใช้เพื่อกำหนดวัตถุกราฟิกและสามารถนำมาใช้ในภายหลังได้ แท็ก Def ใช้เพื่อกำหนดวัตถุกราฟิก สำหรับการแสดงหรือการใช้วัตถุที่คุณต้องการใช้แท็ก ‹use› และภายในนั้นจะต้องผ่าน URL คำจำกัดความ
ความแตกต่างระหว่างกลุ่มและคำจำกัดความคือ ในกรณีของการจัดกลุ่มออบเจ็กต์จะแสดงอยู่แล้วในมุมมอง แต่ในคำจำกัดความ จะแสดงเฉพาะเมื่อใช้ไวยากรณ์ ‹use› โดยการอ้างอิงรหัสออบเจ็กต์
คำจำกัดความที่ใช้เป็นหลักในกรณีของการกำหนดวัตถุที่นำมาใช้ซ้ำได้และสำหรับการสร้างการไล่ระดับสี เรามาดูตัวอย่างคำจำกัดความกัน
ในตัวอย่างข้างต้น คุณจะเห็นว่ากลุ่ม leaf อยู่ภายใต้ส่วนคำจำกัดความ (‹defs›) จึงไม่ปรากฏบนวิวโดยตรง หากต้องการดูข้อมูลควรใช้แท็ก ‹use›
การใช้ ‹defs› อีกประการหนึ่งคือการสร้างการไล่ระดับสี เรามาดูรายละเอียดวิธีการสร้างการไล่ระดับสีกันดีกว่า
การไล่ระดับสี
ภาพจะสมบูรณ์แบบก็ต่อเมื่อมีสีสันที่น่าประทับใจเท่านั้น การไล่ระดับสีจะทำให้ภาพดูดีมาก มาดูวิธีสร้างสีไล่ระดับสีต่างๆ โดยใช้ SVG กัน
การไล่ระดับสีมีสองประเภทด้วยกัน การไล่ระดับสีเชิงเส้นและการไล่ระดับสีแบบเรเดียล
การไล่ระดับสีเชิงเส้น
การไล่ระดับสีเชิงเส้นใช้เพื่อกำหนดการไล่ระดับสีในลักษณะเชิงเส้น โดยทั่วไปการไล่ระดับสีเชิงเส้นจะถูกพล็อตโดยใช้แท็ก ‹linearGradient› ภายในแท็ก ‹linearGradient› นั้นจะใช้องค์ประกอบ ‹stop› เพื่อกล่าวถึงตำแหน่งของสีไล่ระดับสีแต่ละสี นอกจากนี้ SVG ยังมีวิธีอีกมากมายในการปรับแต่งการไล่ระดับสีเชิงเส้นด้วยความช่วยเหลือของแอตทริบิวต์ ต่อไปนี้เป็นคุณลักษณะที่จำเป็นบางประการจากคุณลักษณะนี้
การเปลี่ยนแปลงการไล่ระดับสี:ด้วยความช่วยเหลือของแอตทริบิวต์นี้ ทำให้สามารถใช้การแปลงกับการไล่ระดับสีได้
x1:x พิกัดจุดเริ่มต้นของการไล่ระดับสีเชิงเส้น
x2:x พิกัดจุดสิ้นสุดของการไล่ระดับสีเชิงเส้น
การไล่ระดับสีแบบเรเดียล
มันถูกใช้เพื่อกำหนดการไล่ระดับสีในลักษณะรัศมี ใช้งานได้โดยใช้แท็ก ‹radialGradient› เช่นเดียวกับการไล่ระดับสีเชิงเส้น คุณลักษณะ ‹stop› ใช้สำหรับกำหนดสีไล่ระดับสีและตำแหน่งของสี Radial Gradient ยังรองรับคุณสมบัติบางอย่างสำหรับการปรับแต่งด้วย ปฏิบัติตามคุณลักษณะที่สำคัญจากที่นี่
cx: กำหนดพิกัด x ของวงกลมท้ายของการไล่ระดับสีในแนวรัศมี
cy:กำหนดพิกัด y ของวงกลมท้ายของการไล่ระดับสีในแนวรัศมี
fr:กำหนดรัศมีของวงกลมเริ่มต้นของการไล่ระดับสีในแนวรัศมี
fx: กำหนดพิกัด x ของวงกลมเริ่มต้นของการไล่ระดับสีในแนวรัศมี
fy: กำหนดพิกัด y ของวงกลมเริ่มต้นของการไล่ระดับสีในแนวรัศมี
gradientTransform: แอตทริบิวต์นี้ให้การแปลงเพิ่มเติมเกี่ยวกับการไล่ระดับสี
มาดูการไล่ระดับสีบน SVG พร้อมตัวอย่างบางส่วนกัน
ผลลัพธ์ของข้อมูลโค้ดด้านบนมีลักษณะดังนี้
ตอนนี้เราได้เห็นวิธีทำให้ SVG สวยขึ้นแล้วในบทความนี้ ฉันหวังว่าคุณจะเข้าใจมันดี
