۲۵
اسفند

جلسه ۰۳ : آموزش متن در SVG

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به دوره آموزش SVG هستند. در جلسه قبل یعنی دومین جلسه از دوره آموزش svg، با رایج ترین شکل های موجود در svg آشنا شدیم و هفت شکل کاربردی و رایج svg را معرفی نمودیم. در این جلسه قرار است به آموزش متن در svg بپردازیم.

آموزش متن در SVG

در ادامه آموزش متن در svg ، به معرفی عنصر <text> می پردازیم. از این عنصر برای رسم متون در svg استفاده می شود.

اعلام (Declaration) در SVG

کدهای زیر ساختار اعلام عنصر <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>

<text

x="x-cordinates"

y="y-cordinates"

dx="list of lengths"

dy="list of lengths"

rotate="list of numbers"

textlength="length"

lengthAdjust="spacing" >

</text>

ویژگی ها

ویژگی ها و توصیفات	شماره ویژگی
x − x axis coordinates of glyphs.	۱
y − y axis coordinates of glyphs.	۲
dx − shift along with x-axis.	۳
dy − shift along with y-axis.	۴
rotate − glyphs اعمال چرخش به تمام	۵
textlength − نمایش طول متن	۶
lengthAdjust − نوع تنظیم با طول رندر متن	۷

مثال

مثال : estSVG.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>

<html>

<body>

<h1>Sample SVG Text</h1>

<g>

<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 به طور مستقیم و بدون هیچ افزونه ای استفاده نمایید.
اینترنت اکسپلورر ۹ و نسخه های بالا تر آن نیز از رندر تصویر SVG پشتیبانی می کند.

آموزش متن در svg

Text with rotate

مثال : ext with rotate

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

<body>

<h1>Sample SVG Text</h1>

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

خروجی

Sample SVG Text

Multiline Text

مثال :

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

<body>

<h1>Sample SVG Text</h1>

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

خروجی

Hyper link Text

مثال :

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

<html>

<body>

<h1>Sample SVG Text</h1>

<g>

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

خروجی

کلام آخر

در سومین جلسه از دوره آموزشی svg به آموزش متن در svg پرداختیم. در جلسه بعد این دوره شما را باخطوط در svg آشنا خواهیم کرد.
با پی وی لرن همراه باشید.

به اشتراک بگذارید

text in SVG ,آموزش svg ,آموزش اس وی جی ,آموزش متن در svg ,متن در svg

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۳ : آموزش متن در SVG

مقدمه

آموزش متن در SVG

اعلام (Declaration) در SVG

ویژگی ها

مثال

خروجی

Text with rotate

خروجی

Multiline Text

خروجی

Hyper link Text

خروجی

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ