SVG - คู่มือฉบับย่อ

SVG คืออะไร?

  • SVG, กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้เป็นภาษาที่ใช้ XML เพื่อกำหนดกราฟิกแบบเวกเตอร์

  • SVG มีไว้เพื่อแสดงภาพบนเว็บ

  • เป็นภาพเวกเตอร์ภาพ SVG จะไม่สูญเสียคุณภาพไม่ว่าจะซูมออกหรือปรับขนาดอย่างไร

  • ภาพ SVG รองรับการโต้ตอบและภาพเคลื่อนไหว

  • SVG เป็นมาตรฐาน W3C

  • รูปแบบภาพอื่น ๆ เช่นภาพแรสเตอร์สามารถใช้ภาพ SVG ได้เช่นกัน

  • SVG ทำงานร่วมกับ XSLT และ DOM ของ HTML ได้ดี

ข้อดี

  • ใช้โปรแกรมแก้ไขข้อความใด ๆ เพื่อสร้างและแก้ไขภาพ SVG

  • ด้วยการใช้ XML รูปภาพ SVG จึงสามารถค้นหาจัดทำดัชนีได้และสามารถเขียนสคริปต์และบีบอัดได้

  • ภาพ SVG สามารถปรับขนาดได้สูงเนื่องจากไม่สูญเสียคุณภาพไม่ว่าจะซูมออกหรือปรับขนาดอย่างไร

  • คุณภาพการพิมพ์ที่ดีในทุกความละเอียด

  • SVG เป็นมาตรฐานแบบเปิด

ข้อเสีย

  • ขนาดรูปแบบข้อความจะใหญ่กว่าเมื่อเทียบกับภาพแรสเตอร์ที่จัดรูปแบบไบนารี

  • ขนาดอาจใหญ่ได้สำหรับภาพขนาดเล็ก

ตัวอย่าง

สามารถใช้ตัวอย่าง XML ต่อไปนี้เพื่อวาดวงกลมในเว็บเบราว์เซอร์

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

ฝัง SVG XML โดยตรงในหน้า HTML

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ ใน Internet Explorer จำเป็นต้องใช้ตัวควบคุม activeX เพื่อดูภาพ SVG

SVG ผสานรวมกับ HTML อย่างไร

  • องค์ประกอบ <svg> ระบุจุดเริ่มต้นของภาพ SVG

  • แอตทริบิวต์ความกว้างและความสูงขององค์ประกอบ <svg> กำหนดความสูงและความกว้างของรูปภาพ SVG

  • จากตัวอย่างข้างต้นเราใช้องค์ประกอบ <circle> เพื่อวาดวงกลม

  • cx และ cy แอตทริบิวต์แสดงถึงศูนย์กลางของวงกลม ค่าดีฟอลต์คือ (0,0) r แอตทริบิวต์แสดงรัศมีของวงกลม

  • คุณลักษณะอื่น ๆ ของเส้นโครงร่างและความกว้างของเส้นโครงร่างควบคุมการจัดโครงร่างของวงกลม

  • เติมแอตทริบิวต์กำหนดสีเติมของวงกลม

  • แท็กปิด </svg> ระบุจุดสิ้นสุดของภาพ SVG

SVG มีรูปทรงจำนวนมากที่สามารถใช้ในการวาดภาพ ต่อไปนี้เป็นรูปร่างทั่วไป

ซีเนียร์ ประเภทรูปร่างและคำอธิบาย
1 rect

ใช้ในการวาดรูปสี่เหลี่ยมผืนผ้า
2 วงกลม

ใช้ในการวาดวงกลม
3 วงรี

ใช้ในการวาดวงรี
4 ไลน์

ใช้ในการลากเส้น
5 รูปหลายเหลี่ยม

ใช้ในการวาดรูปทรงปิดซึ่งประกอบด้วยเส้นตรงที่เชื่อมต่อกัน
6 โพลีไลน์

ใช้ในการวาดรูปร่างเปิดซึ่งประกอบด้วยเส้นตรงที่เชื่อมต่อกัน
7 เส้นทาง

ใช้เพื่อวาดเส้นทางใด ๆ

องค์ประกอบ <text> ใช้ในการวาดข้อความ

คำประกาศ

ต่อไปนี้คือการประกาศไวยากรณ์ของ <text>ธาตุ. เราได้แสดงคุณสมบัติหลักเท่านั้น

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

คุณลักษณะ

ซีเนียร์ คุณสมบัติและคำอธิบาย
1 x - พิกัดแกน x ของร่ายมนตร์
2 y - พิกัดแกน y ของร่ายมนตร์
3 dx - เลื่อนไปตามแกน x
4 dy - เลื่อนไปตามแกน y
5 rotate - การหมุนใช้กับร่ายมนตร์ทั้งหมด
6 textlength - การแสดงผลความยาวของข้อความ
7 lengthAdjust - ประเภทของการปรับแต่งตามความยาวที่แสดงผลของข้อความ

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Text</title>
   <body>
      
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

ข้อความที่มีการหมุน

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

ข้อความหลายบรรทัด

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

ข้อความไฮเปอร์ลิงค์

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>
         
            <a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

SVG รองรับคุณสมบัติหลายจังหวะ

ต่อไปนี้เป็นคุณสมบัติหลักของจังหวะที่ใช้

ซีเนียร์ ประเภทและคำอธิบายของโรคหลอดเลือดสมอง
1 stroke - กำหนดสีของข้อความเส้นหรือโครงร่างขององค์ประกอบใด ๆ
2 stroke-width - กำหนดความหนาของข้อความเส้นหรือโครงร่างขององค์ประกอบใด ๆ
3 stroke-linecap - กำหนดประเภทต่างๆของการสิ้นสุดของเส้นหรือโครงร่างของเส้นทางใด ๆ
4 stroke-dasharray - ใช้สร้างเส้นประ

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50" />
            <path stroke="green" d="M 50 70 L 300 70" />
            <path stroke="blue" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

ความกว้างของเส้นขีด

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

โรคหลอดเลือดสมอง

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

โรคหลอดเลือดสมอง dasharray

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

SVG ใช้องค์ประกอบ <filter> เพื่อกำหนดตัวกรอง องค์ประกอบ <filter> ใช้แอตทริบิวต์ id เพื่อระบุโดยไม่ซ้ำกันตัวกรองถูกกำหนดภายในองค์ประกอบ <def> จากนั้นจะอ้างอิงโดยองค์ประกอบกราฟิกตามรหัส

SVG มีชุดฟิลเตอร์มากมาย ต่อไปนี้เป็นรายการตัวกรองที่ใช้กันทั่วไป

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - ตัวกรองสำหรับเงาตก
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

คำประกาศ

ต่อไปนี้คือการประกาศไวยากรณ์ของ <filter>ธาตุ. เราได้แสดงคุณสมบัติหลักเท่านั้น

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

คุณลักษณะ

ซีเนียร์ ชื่อและคำอธิบาย
1 filterUnits- หน่วยในการกำหนดขอบเขตผลการกรอง ระบุระบบพิกัดสำหรับค่าความยาวต่างๆภายในตัวกรองและสำหรับแอตทริบิวต์ที่กำหนดภูมิภาคย่อยของตัวกรอง ถ้า filterUnits = "userSpaceOnUse" ค่าต่างๆจะแสดงถึงค่าในระบบพิกัดผู้ใช้ปัจจุบันในเวลาที่ใช้องค์ประกอบ "ตัวกรอง" ถ้า filterUnits = "objectBoundingBox" ค่าจะแสดงค่าเป็นเศษส่วนหรือเปอร์เซ็นต์ของกล่องขอบเขตบนองค์ประกอบที่อ้างอิงในเวลาที่ใช้องค์ประกอบ "ตัวกรอง" ค่าเริ่มต้นคือ userSpaceOnUse
2 primitiveUnits- หน่วยในการกำหนดขอบเขตผลการกรอง ระบุระบบพิกัดสำหรับค่าความยาวต่างๆภายในตัวกรองและสำหรับแอตทริบิวต์ที่กำหนดภูมิภาคย่อยของตัวกรอง ถ้า filterUnits = "userSpaceOnUse" ค่าต่างๆจะแสดงถึงค่าในระบบพิกัดผู้ใช้ปัจจุบันในเวลาที่ใช้องค์ประกอบ "ตัวกรอง" ถ้า filterUnits = "objectBoundingBox" ค่าจะแสดงค่าเป็นเศษส่วนหรือเปอร์เซ็นต์ของกล่องขอบเขตบนองค์ประกอบที่อ้างอิงในเวลาที่ใช้องค์ประกอบ "ตัวกรอง" ค่าเริ่มต้นคือ userSpaceOnUse
3 x- แกน x ประสานกันของกล่องขอบเขตตัวกรอง ค่าเริ่มต้นคือ 0
4 y- แกน y ประสานกันของกล่องขอบเขตตัวกรอง ค่าเริ่มต้นคือ 0
5 width- ความกว้างของกล่องขอบเขตตัวกรอง ค่าเริ่มต้นคือ 0
6 height- ความสูงของกล่องขอบเขตตัวกรอง ค่าเริ่มต้นคือ 0
7 filterRes - ตัวเลขแสดงพื้นที่ตัวกรอง
8 xlink:href - ใช้เพื่ออ้างถึงตัวกรองอื่น

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

  • องค์ประกอบ <filter> สองรายการที่กำหนดเป็น filter1 และ filter2

  • เอฟเฟกต์ฟิลเตอร์ feGaussianBlur กำหนดเอฟเฟกต์เบลอด้วยปริมาณความเบลอโดยใช้ stdDeviation

  • in = "SourceGraphic" กำหนดว่าเอฟเฟกต์สามารถใช้ได้กับทั้งองค์ประกอบ

  • feOffset กรองเอฟเฟกต์ใช้เพื่อสร้างเอฟเฟกต์เงา in = "SourceAlpha" กำหนดว่าเอฟเฟกต์สามารถใช้ได้กับส่วนอัลฟาของกราฟิก RGBA

  • องค์ประกอบ <rect> เชื่อมโยงตัวกรองโดยใช้แอตทริบิวต์ตัวกรอง

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

กรองด้วยเอฟเฟกต์เงา

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

SVG ใช้องค์ประกอบ <pattern> เพื่อกำหนดรูปแบบ รูปแบบถูกกำหนดโดยใช้องค์ประกอบ <pattern> และใช้เพื่อเติมองค์ประกอบกราฟิกในแบบเรียงต่อกัน

คำประกาศ

ต่อไปนี้คือการประกาศไวยากรณ์ของ <pattern>ธาตุ. เราได้แสดงคุณสมบัติหลักเท่านั้น

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

คุณลักษณะ

ซีเนียร์ ชื่อและคำอธิบาย
1 patternUnits- หน่วยในการกำหนดขอบเขตผลรูปแบบ ระบุระบบพิกัดสำหรับค่าความยาวต่างๆภายในรูปแบบและสำหรับแอตทริบิวต์ที่กำหนดขอบเขตย่อยของรูปแบบ ถ้า patternUnits = "userSpaceOnUse" ค่าจะแสดงถึงค่าในระบบพิกัดผู้ใช้ปัจจุบันในเวลาที่ใช้องค์ประกอบ "pattern" ถ้า patternUnits = "objectBoundingBox" ค่าจะแสดงค่าในรูปเศษส่วนหรือเปอร์เซ็นต์ของกล่องขอบเขตบนองค์ประกอบที่อ้างอิงในเวลาที่ใช้องค์ประกอบ "pattern" ค่าเริ่มต้นคือ userSpaceOnUse
2 patternContentUnits- หน่วยเพื่อกำหนดขอบเขตเนื้อหารูปแบบ ระบุระบบพิกัดสำหรับค่าความยาวต่างๆภายในรูปแบบและสำหรับแอตทริบิวต์ที่กำหนดขอบเขตย่อยของรูปแบบ ถ้า patternContentUnits = "userSpaceOnUse" ค่าจะแสดงถึงค่าในระบบพิกัดผู้ใช้ปัจจุบันในเวลาที่ใช้องค์ประกอบ "pattern" ถ้า patternContentUnits = "objectBoundingBox" ค่าจะแสดงค่าในรูปเศษส่วนหรือเปอร์เซ็นต์ของกล่องขอบเขตบนองค์ประกอบที่อ้างอิงในเวลาที่ใช้องค์ประกอบ "pattern" ค่าเริ่มต้นคือ userSpaceOnUse
3 x- แกน x ประสานงานของกล่องขอบเขตรูปแบบ ค่าเริ่มต้นคือ 0
4 y- แกน y ประสานงานของกรอบรูปแบบ ค่าเริ่มต้นคือ 0
5 width- ความกว้างของกรอบรูปแบบ ค่าเริ่มต้นคือ 0
6 height- ความสูงของกรอบรูปแบบ ค่าเริ่มต้นคือ 0
7 preserveAspectRatio - เพื่อรักษาอัตราส่วนความกว้าง / ความสูงของเนื้อหาต้นฉบับ
8 xlink:href - ใช้เพื่ออ้างถึงรูปแบบอื่น

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

  • องค์ประกอบ <pattern> หนึ่งรายการที่กำหนดเป็นรูปแบบ 1

  • ในรูปแบบช่องมองภาพถูกกำหนดและกำหนดเส้นทางที่จะใช้เป็นรูปแบบ

  • ในองค์ประกอบ rect ในแอตทริบิวต์เติม url ของรูปแบบถูกระบุเพื่อเติมเต็มรูปแบบสี่เหลี่ยมผืนผ้าที่สร้างขึ้นก่อนหน้านี้

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

การไล่ระดับสีหมายถึงการเปลี่ยนสีหนึ่งไปเป็นสีอื่นอย่างราบรื่นภายในรูปร่าง SVG มีการไล่ระดับสีสองประเภท

  • Linear Gradients - แสดงถึงการเปลี่ยนแปลงเชิงเส้นของสีหนึ่งไปยังอีกสีหนึ่งจากทิศทางหนึ่งไปอีกทิศทางหนึ่ง

  • Radial Gradients - หมายถึงการเปลี่ยนสีหนึ่งไปเป็นวงกลมจากทิศทางหนึ่งไปยังอีกสีหนึ่ง

การไล่ระดับสีเชิงเส้น

คำประกาศ

ต่อไปนี้คือการประกาศไวยากรณ์ของ <linearGradient>ธาตุ. เราได้แสดงคุณสมบัติหลักเท่านั้น

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

คุณลักษณะ

ซีเนียร์ ชื่อและคำอธิบาย
1 gradientUnits- หน่วยเพื่อกำหนดระบบพิกัดสำหรับค่าความยาวต่างๆภายในการไล่ระดับสี ถ้า gradientUnits = "userSpaceOnUse" ค่าจะแทนค่าในระบบพิกัดผู้ใช้ปัจจุบันในเวลาที่ใช้องค์ประกอบการไล่ระดับสี ถ้า patternContentUnits = "objectBoundingBox" ค่าจะแสดงค่าในรูปเศษส่วนหรือเปอร์เซ็นต์ของกล่องขอบเขตบนองค์ประกอบที่อ้างอิงในเวลาที่ใช้องค์ประกอบการไล่ระดับสี ค่าเริ่มต้นคือ userSpaceOnUse
2 x1- แกน x ประสานงานของเวกเตอร์ไล่ระดับสี ค่าเริ่มต้นคือ 0
3 y1- แกน y ประสานงานของเวกเตอร์การไล่ระดับสี ค่าเริ่มต้นคือ 0
4 x2- แกน x ประสานงานของเวกเตอร์ไล่ระดับสี ค่าเริ่มต้นคือ 0
5 y2- แกน y ประสานงานของเวกเตอร์การไล่ระดับสี ค่าเริ่มต้นคือ 0
6 spreadMethod- ระบุวิธีการกระจายการไล่ระดับสีภายในองค์ประกอบกราฟิก ค่าเริ่มต้นคือ 'pad'
7 xlink:href - ใช้เพื่ออ้างถึงการไล่ระดับสีอื่น

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

  • องค์ประกอบ <linearGradient> หนึ่งรายการที่กำหนดเป็น sampleGradient

  • ใน linearGradient จะมีการกำหนดออฟเซตสองสีด้วยสองสี

  • ในองค์ประกอบ rect ในแอตทริบิวต์เติม url ของการไล่ระดับสีถูกระบุเพื่อเติมเต็มสี่เหลี่ยมผืนผ้าด้วยการไล่ระดับสีที่สร้างขึ้นก่อนหน้านี้

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

การไล่ระดับสีแบบเรเดียล

คำประกาศ

ต่อไปนี้คือการประกาศไวยากรณ์ของ <radialGradient>ธาตุ. เราได้แสดงคุณสมบัติหลักเท่านั้น

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

คุณลักษณะ

ซีเนียร์ ชื่อและคำอธิบาย
1 gradientUnits- หน่วยเพื่อกำหนดระบบพิกัดสำหรับค่าความยาวต่างๆภายในการไล่ระดับสี ถ้า gradientUnits = "userSpaceOnUse" ค่าจะแทนค่าในระบบพิกัดผู้ใช้ปัจจุบันในเวลาที่ใช้องค์ประกอบการไล่ระดับสี ถ้า patternContentUnits = "objectBoundingBox" ค่าจะแสดงค่าในรูปเศษส่วนหรือเปอร์เซ็นต์ของกล่องขอบเขตบนองค์ประกอบที่อ้างอิงในเวลาที่ใช้องค์ประกอบการไล่ระดับสี ค่าเริ่มต้นคือ userSpaceOnUse
2 cx- แกน x ประสานตรงกลางวงกลมที่ใหญ่ที่สุดของเวกเตอร์ไล่ระดับสี ค่าเริ่มต้นคือ 0
3 cy- แกน y ประสานตรงกลางวงกลมที่ใหญ่ที่สุดของเวกเตอร์ไล่ระดับสี ค่าเริ่มต้นคือ 0
4 r- รัศมีของศูนย์กลางของวงกลมที่ใหญ่ที่สุดของเวกเตอร์ไล่ระดับสี ค่าเริ่มต้นคือ 0
5 fx- จุดโฟกัสของการไล่ระดับสีในแนวรัศมี ค่าเริ่มต้นคือ 0
6 fy- จุดโฟกัสของการไล่ระดับสีในแนวรัศมี ค่าเริ่มต้นคือ 0
7 spreadMethod- ระบุวิธีการกระจายการไล่ระดับสีภายในองค์ประกอบกราฟิก ค่าเริ่มต้นคือ 'pad'
8 xlink:href - ใช้เพื่ออ้างถึงการไล่ระดับสีอื่น

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

  • องค์ประกอบ <radialGradient> หนึ่งรายการที่กำหนดเป็น sampleGradient

  • ใน radialGradient จะมีการกำหนดออฟเซ็ตสองสีด้วยสองสี

  • ในองค์ประกอบ rect ในแอตทริบิวต์เติม url ของการไล่ระดับสีถูกระบุเพื่อเติมเต็มสี่เหลี่ยมผืนผ้าด้วยการไล่ระดับสีที่สร้างขึ้นก่อนหน้านี้

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG

ภาพ SVG สามารถตอบสนองต่อการกระทำของผู้ใช้ SVG รองรับเหตุการณ์ตัวชี้เหตุการณ์แป้นพิมพ์และเหตุการณ์เอกสาร ลองพิจารณาตัวอย่างต่อไปนี้

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

คำอธิบาย

  • SVG รองรับฟังก์ชัน JavaScript / ECMAScript บล็อกสคริปต์ต้องอยู่ในบล็อก CDATA ให้พิจารณาการสนับสนุนข้อมูลอักขระใน XML

  • องค์ประกอบ SVG รองรับเหตุการณ์เมาส์เหตุการณ์แป้นพิมพ์ เราใช้เหตุการณ์ onClick เพื่อเรียกใช้ฟังก์ชันจาวาสคริปต์

  • ในฟังก์ชันจาวาสคริปต์เอกสารแสดงถึงเอกสาร SVG และสามารถใช้เพื่อรับองค์ประกอบ SVG

  • ในฟังก์ชันจาวาสคริปต์เหตุการณ์แสดงถึงเหตุการณ์ปัจจุบันและสามารถใช้เพื่อรับองค์ประกอบเป้าหมายที่เหตุการณ์ได้รับการยกระดับ

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG คลิกที่แต่ละข้อความและสี่เหลี่ยมผืนผ้าเพื่อดูผลลัพธ์

<a> องค์ประกอบใช้ในการสร้างไฮเปอร์ลิงก์ แอตทริบิวต์ "xlink: href" ใช้เพื่อส่งผ่าน IRI (Internationalized Resource Identifiers) ซึ่งเสริมกับ URI (Uniform Resource Identifiers)

คำประกาศ

ต่อไปนี้คือการประกาศไวยากรณ์ของ <a>ธาตุ. เราได้แสดงคุณสมบัติหลักเท่านั้น

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

คุณลักษณะ

ซีเนียร์ ชื่อและคำอธิบาย
1 xlink:show- เพื่อวัตถุประสงค์ในการจัดทำเอกสารสำหรับโปรเซสเซอร์ที่รับรู้ XLink ค่าเริ่มต้นใหม่
2 xlink:actuate - เพื่อวัตถุประสงค์ในการจัดทำเอกสารสำหรับโปรเซสเซอร์ที่รับรู้ XLink
3 xlink:href - ตำแหน่งของวัตถุอ้างอิง
4 target - ใช้เมื่อเป้าหมายของทรัพยากรสิ้นสุดเป็นไปได้

ตัวอย่าง

testSVG.htm 
<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

เอาต์พุต

เปิด textSVG.htm ในเว็บเบราว์เซอร์ Chrome คุณสามารถใช้ Chrome / Firefox / Opera เพื่อดูภาพ SVG ได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินใด ๆ Internet Explorer 9 ขึ้นไปยังรองรับการแสดงภาพ SVG คลิกที่ลิงค์และสี่เหลี่ยมผืนผ้าเพื่อดูผลลัพธ์

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved