Tekst

Hva

Vi har stor handlefrihet når det gjelder å framstille tekst. Vi kan arbeide med fonter, størrelse, transformasjoner, animasjoner og organisering.

Følgende stilsett er relevant for svg-elementene nedenfor:

svg{background-color:beige;border-style:solid;border-width:thin}
#T12{font-family:Garamonde}
#T13{font-family:Garamonde;font-style:italic}
#T14{font-weight:bold}

fonter

<svg width="300px" height="150px"  
     viewBox="0 0 300 150">   
   <text id="T11" x="10" y="30" 
         font-family="Verdana" font-size="30" fill="blue"> 
      Verdana 30
   </text>   
   <text id="T12" x="10" y="70" 
      font-size="35" fill="red" stroke="black" stroke-width="0.2"> 
      Garamonde 35
   </text>   
   <text id="T13" x="10" y="100"
      font-size="30" fill="red" stroke="black" stroke-width="0.2"> 
      Garamonde 30 italic
   </text>
   <text id="T14" x="10" y="140"
      font-family="Ariel" font-size="30" fill="green" > 
      Ariel 30 bold
   </text>
</svg>

Organisering

<svg class="backshow" width="400px" height="150px"  
     viewBox="0 0 400 150">   
<g font-family="Verdana" font-size="17" fill="blue">
   <g   transform="translate(10,10)" text-anchor="start" >
   <text x="0" y="10">Halden</text>
   <text x="0" y="40">Moss</text>
   <text y="70">Fredrikstad</text>
   <text x="0" y="100">Sarpsborg</text>
   </g>
   <g  transform="translate(200,10)" text-anchor="middle" >
   <text x="0" y="10">Halden</text>
   <text x="0" y="40">Moss</text>
   <text x="0" y="70">Fredrikstad</text>
   <text x="0" y="100">Sarpsborg</text>
   </g>
   <g transform="translate(390,10)" x="200" text-anchor="end" >
   <text x="0" y="10">Halden</text>
   <text x="0" y="40">Moss</text>
   <text x="0" y="70">Fredrikstad</text>
   <text x="0" y="100">Sarpsborg</text>
   </g>
</g>
</svg>

Rotasjon

<svg id="demo1" class="backshow" width="300px" height="250px"  
     viewBox="0 0 300 250">
<g transform="translate(50,150)">
   <text id="T1" x="0" y="0"
      transform="rotate(-30)"
      font-family="Verdana" font-size="20" 
      fill="blue" stroke="none"> 
      Hallo, dette ble skjevt
   </text>
   <text id="T2" x="70" y="-30"
      transform="rotate(30)"
      font-family="Verdana" font-size="20" 
      fill="red" stroke="black" stroke-width="0.2"> 
      Ja du store
   </text>
</g>
</svg>

Animasjon

Hva med en litt kaotisk animasjon

<svg id="demoa" class="backshow" width="300px" height="300px"  
   viewBox="0 0 300 300">
<g transform="translate(100,100)">
   <text id="T3" x="-10" y="5"
      font-family="Verdana" font-size="5" 
      fill="blue" stroke="none"> 
      Hallo
      <animateMotion id="a1" from="0,0" to="50,50"
         begin="indefinite" dur="12s"  fill="freeze" />      
      <animateTransform  id="a2" attributeName="transform" 
         attributeType="XML"
         type="rotate" from="1" to="1440"
         begin="indefinite" dur="6s"  />      
      <animateTransform  id="a3" attributeName="transform" 
         attributeType="XML"
         type="scale" from="1" to="15" additive="sum"
         begin="indefinite" dur="12s" fill="freeze" />      
   </text>
   <text id="T4" x="-10" y="15"
      font-family="Verdana" font-size="50" 
      fill="blue" stroke="none"> 
      JADA
      <animate  id="a4" attributeName="fill" 
         attributeType="XML"
         from="blue" to="red"
         begin="indefinite" fill="freeze" dur="12s"/>
   </text>
</g>
</svg>

og Javasciptkoden:

function startAnimation(){
    document.querySelector("#demoa #a1").beginElement();
    document.querySelector("#demoa #a2").beginElement();
    document.querySelector("#demoa #a3").beginElement();
    document.querySelector("#demoa #a4").beginElement();
}