บทความบทนำของ wulin.com (www.vevb.com): ชื่อเต็มของ SVG เป็นกราฟิกเวกเตอร์ที่ปรับขนาดได้ หากคุณใช้ Adobe Illustrator ฉันเชื่อว่าคุณไม่ได้ไม่คุ้นเคยกับรูปแบบรูปภาพที่เหมาะสมนี้!
ก่อนที่เราจะเริ่มใช้ SVG ลองมาดู SVG ก่อนและอธิบายว่าทำไมเราถึงใช้ SVG
ชื่อเต็มของ SVG เป็นกราฟิกเวกเตอร์ที่ปรับขนาดได้ หากคุณใช้ Adobe Illustrator ฉันเชื่อว่าคุณไม่ได้ไม่คุ้นเคยกับรูปแบบรูปภาพที่เหมาะสมนี้!
ทำไมต้องใช้ SVG? การสนับสนุนเบราว์เซอร์หากคุณต้องการสนับสนุนเบราว์เซอร์เวอร์ชันเหล่านี้คุณสามารถใช้ Modernizr ได้ดังนี้:
if (! modernizr.svg) {
$ (. gblogo img) .attr (src, images/logo.png);
-
หรือใช้รหัสที่ง่ายต่อไปนี้:
<img src = gblogo.svg onerror = this.onerror = null; this.src = gblogo.png>
ไฟล์ SVG ใช้เป็นรูปภาพทั่วไปคุณสามารถใช้มันโดยตรงเป็นภาพดังนี้:
<img src = logo.svg href = class = โลโก้>
csswang.com
</a>
รหัส CSS:
.logo {
แสดง:
Indent-Indent:
ความกว้าง:
ความสูง:
ความเป็นมา:
ขนาดพื้นหลัง:
-
ใช้ SVG ในบรรทัดคุณสามารถคัดลอกรหัส SVG โดยตรงเข้าสู่ร่างกายและคุณจะเห็นภาพดังนี้:
<body>
<!-คัดลอกรหัส SVG ที่นี่และรูปภาพจะปรากฏขึ้น->
</body>
ควบคุม SVG ด้วย CSSคุณสามารถใช้ CSS เพื่อควบคุมไฟล์ SVG รหัสต่อไปนี้จะควบคุมสีพื้นหลังของภาพเมื่อเมาส์ถูกระงับ:
<g class = การแปลงโลโก้ = แปล (0.000000,500.000000) (0.100000, -0.100000)
fill =#00000 stroke = none>
รหัสข้างต้นกำหนดคลาสของโลโก้และเราสามารถกำหนดได้ใน CSS ดังนี้:
.logo: โฮเวอร์ {
เติม:
-
-
โปรดทราบว่าใน SVG เราใช้การเติมแทนพื้นหลังเพื่อกำหนดสีพื้นหลัง
คุณสามารถใช้ตัวกรองเพื่อควบคุมความคลุมเครือดังนี้:
.logo: โฮเวอร์ {
เติม:
กรอง:
-
เมื่อคุณใช้เมาส์เพื่อโฮเวอร์ภาพเอฟเฟกต์ต่อไปนี้จะเป็น
การดีบักออนไลน์:
สรุปเครื่องมือที่เกี่ยวข้องกับ SVGSVG เป็นรูปแบบภาพที่ทรงพลังมากที่สามารถช่วยคุณประมวลผลรูปภาพได้อย่างมีประสิทธิภาพและมีวิธีการแสดงผลกราฟิกที่ยืดหยุ่นและทรงพลังกว่า JPG หรือ PNG ฉันเชื่อว่าถ้ามันถูกนำไปใช้ในเวลามันจะกลายเป็นวิธีการประมวลผลภาพที่ได้รับความนิยมมากที่สุด!