CSS i SVG

Hva

SVG-elementene har en del attributter som vi ikke finner i "normale" HTML-elementer. Vi kan likevel i stor grad bruke CSS til sette en del egenskaper. Dette er bare for å peke på et ganske stort og ikke helt uproblematisk grensenitt (SVG/CSS).

Et enkelt eksempel

<svg id="demo1" width="300px" height="70px"  viewBox="0 0 300 60">
<g id="d1">
    <rect id="d11" x="10" y="10" width="28" height="30"/>        
    <rect id="d12" x="70" y="10" width="28" height="30"/>        
    <rect class="greenish"  x="130" y="10" width="28" height="30"/>        
    <rect class="pinkish bigborder" x="190" y="10" width="28" height="30"/>
</g>    
</svg>

Stilsettet er slik:

#demo1{background-color:beige;
       border-style:solid;border-color:black; border-width:thin;}
#demo1 #d1{stroke:black;stroke-width:2}
#demo1 #d11{fill:red}
#demo1 #d12{fill:blue}
.greenish{fill:green}
.pinkish{fill:pink}
.bigborder{stroke-width:5}

Animasjon

Vi kan bruke CSS-transformasjoner på mange måter. Mer dynamisk CSS dette i CSS

eksempel2

Klikk på den røde firkanten

<svg class="markedsvg" width="400px" height="100px" viewBox="0 0 400 100">
    <rect class="test2B" x="1" y="1" width="30" height="50"  
    onclick="toggleClasses2(this)" fill="red"/>
</svg>

Stilsettet er slik:

rect.test2A{
-webkit-transform:translate(300px, 0px);
transform:translate(300px, 0px);
 
-webkit-transition-property:-webkit-transform:translate();
transition-property:transform:translate();
 
-webkit-transition-duration:2s;
transition-duration:2s;
}
rect.test2B{ 
-webkit-transform:translate(0px, 0px);
transform:transform(0px, 0px);
 
-webkit-transition-property:-webkit-transform:translate();
transition-property:transform:translate();
 
-webkit-transition-duration:2s;
transition-duration:2s;
}

og Javascriptkoden slik:

function toggleClasses2(elt){
    elt.classList.toggle("test2B");
    elt.classList.toggle("test2A");
    console.log(elt.classList);
}

eksempel3

Klikk på den røde firkanten

<svg class="markedsvg" width="400px" height="100px" viewBox="0 0 400 100">
    <rect class="test3B" x="1" y="1" width="30" height="50"  
    onclick="toggleClasses3(this)" fill="red"/>
</svg>

Stilsettet er slik:

rect.test3A{
-webkit-transform:scale(10, 1.5);
transform:scale(10,1.5);
 
-webkit-transition-property:-webkit-transform:scale();
transition-property:transform:scale();
 
-webkit-transition-duration:2s;
transition-duration:2s;
}
rect.test3B{ 
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
 
-webkit-transition-property:-webkit-transform:scale();
transition-property:transform:scale();
 
-webkit-transition-duration:2s;
transition-duration:2s;
}

og Javascriptkoden slik:

function toggleClasses3(elt){
    elt.classList.toggle("test3B");
    elt.classList.toggle("test3A");
    console.log(elt.classList);
}