SVG lineaariset peittymät

SVG peittaus

Peittaus on pehmeä siirtyminen yhdestä väristä toiseen. Lisäksi voidaan käyttää useita väripeittäyksiä samassa elementissä.

SVG:ssä on kaksi pääasiallista peittausmuotoa:

• Lineaarinen peittaus
• Säteinen peittaus

SVG lineaarinen peittaus - <linearGradient>

<linearGradient> Elementti käytetään lineaarisen peittauksen määrittämiseen.

<linearGradient> Elementti täytyy olla sisällä <defs> merkinnässä.<defs> Elementti on määrittelyjen (definitions) lyhennys, joka sisältää erityisten elementtien (kuten suodattimien) määrittelyt.

Lineaarinen peittaus voidaan määritellä horisontaaliseksi, pystysuuntaiseksi tai kulmavaiheeksi:

• Luo horisontaalinen vaihe, kun y1 ja y2 ovat yhtä suuria ja x1 ja x2 eivät ole yhtä suuria
• Luo pystysuuntainen vaihe, kun x1 ja x2 ovat yhtä suuria ja y1 ja y2 eivät ole yhtä suuria
• Luo kulmavaihe, kun x1 ja x2 ovat eri ja y1 ja y2 eivät ole yhtä suuria

Esimerkki 1

Määritä ympyrä, jolla on keltainen-vihreä horisontaalinen lineaarinen peittaus:

Tämä on SVG-koodi:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Kokeile itse

Koodin selitys:

• <linearGradient>-kirjaintunnisteiden id-ominaisuus määrittää peittauksen ainutlaatuisen nimen
• <linearGradient>-kirjaintunnisteiden x1, x2, y1, y2-ominaisuudet määrittävät peittauksen alkuperän ja lopun sijainnin
• Peittauksen värimaailma koostuu kahdesta tai useammasta väristä. Jokainen väri määritellään <stop>-merkinnällä
• offset-ominaisuus määrittää peittauksen värien alkuperän ja lopun sijainnin
• fill-ominaisuus liittää ympyräelementin peittaukseen

Esimerkki 2

Määritellään ympyrä, jossa on keltainen ja punainen pystysuuntainen linjaarinen peittaus:

Tämä on SVG-koodi:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Kokeile itse

Esimerkki 3

Määritellään ympyrä ja lisätään siihen teksti, jossa on vaakasuuntainen keltainen ja punainen linjaarinen peittaus:

Tämä on SVG-koodi:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Kokeile itse

Koodin selitys:

• <text>-elementti käytetään tekstin lisäämiseen