Talo: seinä, katto, ovi ja ikkuna
Vie osoitin talon päälle. Muuta CSS-kentän arvoja ja paina Run.
CSS
/* Inline-SVG on osa dokumenttia, joten sen osiin pääsee käsiksi tavallisilla CSS-valitsimilla. Värit, viivat ja läpinäkyvyys annetaan SVG:n omilla ominaisuuksilla. fill = täyttöväri stroke = viivan väri stroke-width = viivan paksuus HUOM: tämä toimii vain, kun SVG on kirjoitettu suoraan dokumenttiin. Jos kuva on liitetty img-elementillä, ulkopuolinen CSS ei ylety sen sisään. */ .kuva { width: 20em; height: auto; } .seina { fill: #ffe9a8; stroke: #23201c; stroke-width: 2; } .katto { fill: #b3261e; stroke: #23201c; stroke-width: 2; } .ovi { fill: #7a3b12; } .ikkuna { fill: #eef1f7; stroke: #23201c; stroke-width: 2; } /* currentColor tarkoittaa elementin color-ominaisuuden arvoa. Sillä saa kuvan seuraamaan tekstin väriä. */ .kuva:hover .ovi { fill: #1f5c46; } .kuva:hover .ikkuna { fill: #ffe9a8; }
HTML
<svg class="kuva" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="svg-otsikko"> <title id="svg-otsikko">Talo: seinä, katto, ovi ja ikkuna</title> <rect class="seina" x="40" y="50" width="120" height="60" /> <polygon class="katto" points="30,50 100,10 170,50" /> <rect class="ovi" x="85" y="80" width="30" height="30" /> <circle class="ikkuna" cx="60" cy="70" r="10" /> <circle class="ikkuna" cx="140" cy="70" r="10" /> </svg> <p>Vie osoitin talon päälle. Muuta CSS-kentän arvoja ja paina Run.</p>
Javascript
Konsoli