SVG - ข้อความ

องค์ประกอบ <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>

เอาต์พุต

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

<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>

เอาต์พุต

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

<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>

เอาต์พุต