Teksta attēlošana SVG

Last modified by superadmin on 2018-01-12 20:37

Teksta attēlošana SVG

Tekstu ievada ar <text>...</text> elementa palīdzību. Piemēram, sekojoša rinda izvadīs uz ekrāna tekstu "This is an SVG text!":

<text x="250" y="100">This is an SVG text!</text>

Piemērs: 01.svg

Ievadot tekstu, jāaprakstā arī koordinātes, kur lai šo tekstu ievieto. X koordināte nosaka teksta atkāpi pikseļos no kreisās ekrāna malas, bet Ykoordināte nosaka teksta atkāpi no augšējās ekrāna malas. Mūsu piemērā X=250, bet Y=100.

Dažādi fonti

Tekstu var ievadīt ar dažādiem fontiem, kas ir pieejami lietotājam. Tas ir arī viens no teksta dekorācijas veidiem, kas var piedot tekstam īpašu izskatu. Sekojošas SVG dokumenta rindas izvada uz ekrāna tekstu "This is Verdana font, font-size 18. SVG allows to use lot of fonts!" ar "verdana" fontu un izmēru "18":

<g style="font-family: Verdana; font-size:18">
<text x="20" y="25">This is Verdana font, font-size 18.</text>
<text x="20" y="50">SVG allows to use lots of fonts!</text>
</g>

Piemērs: 02.svg

Teksts uz līkas vadlīnijas

Ar path birku var izmainīt teksta virzienu, kā arī uzzīmēt līnijas, kuras sekotu līdzi tekstam. Šis SVG-dokuments izmanto "path" birku:

<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300">
  <defs>
    <path id="MyPath"
          d="M 100 200;
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <use xlink:href="#MyPath" fill="none" stroke="red"  />
  <text font-family="verdana" font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>
</svg>

Piemērs: 04.svg

Hipersaites

SVG-dokumenta var ievest teksta saites, kuras ielādē pārlūkprogrammas logā citu dokumentu. Piemēram, uzspiežot linku sekojošā SVG-dokumentā, lietotājs varēs apskatīt DELFI portāla web-lapu:

<svg width="100" height="30">
<a xlink:href="http://www.delfi.lv" xlink:type="simple">
<text font-family="verdana" x="0" y="20">DELFI portāls</text>
</a>
</svg>

Piemērs: 05.svg

Tags:
Created by Kalvis Apsītis on 2008-05-01 18:05
    
This wiki is licensed under a Creative Commons 2.0 license
XWiki Enterprise 6.4 - Documentation