Det norske flagget
SVG-elementet
Merk at vi har lagt inn transform="translate()" for å få margin til flagget og avstand til teksten. Vi kunne selvsagt gjort dette ved å sette x- og y-verdier direkte. Mer om transform i andre moduler.
Endre innholdet
Vi skal ganske enkelt bytte ut teksten i bildet.
function changeText(){
var telt=document.querySelector('svg[id="NOT"] text[id="TextElement"]');
if(telt.innerHTML=="Gratulerer")
telt.innerHTML="17.mai";
else
telt.innerHTML="Gratulerer";
}
Vi ser altså at svg-elementet og dets barn føyer seg inn i den allminnelige strukturen på websiden og vi kan finne elementer på vanlig måte. Vi sr videre at å endre innerHTML er kurant, som ventet blir dette innholdet parset som vi er vant til.
I modulen SVG-DOM skal vi se litt nærmere på dette. Det er ikke like enkelt å endre strukturen ved å konstruere og legge in nye elementer med ønskede egenskaper.
Zooming
Vi ønsker å sette opp en enkel interaktiv zoom-funksjon. Jeg gjør dette ved hjelp av input type range, men dette kan gjøres på mange måter.
Det vi ønsker å gjøre når vi zoomer er å endre attributtene width og height i elementet med id="NO". Vi bruker den horisontale slideren slik:
// init when loaded
document.getElementById("zoomerh").value=300;
var svgElt1 = document.getElementById('NOZ1');
Zoom1();
function Zoom1(){
var v=document.getElementById("zoomerh").value;
svgElt1.setAttribute("viewBox","0 0 "+(600-v)+" "+(600-v)+" ");
}
Vi setter min og max i range elementet til hhv 10 og 400.
Her har vi zoomet ved å minske viewBox og beholde bredden og høyden på svg-elementet. Vi kunne lett ha snudd problemstillingen ved å øke bredden og høyden på selve svg-elementet. Da ville resten av siden forskyve seg for å få plass til et forstørret bilde. Vi kunne også ha midtstilt bildet ved å endre transformasjonen i det ytterste g-elementet.
Vi kan forsøke et lite trikk å få til en kontinuerlig zoom.
<form oninput="amount.value=zoomer2.value;Zoom2()">
<input id="zoomer2" type="range" name="zoomer2"
min="10" max="400" value="300" />
<output style="display:none" onchange="ZoomAgain()" id="amount" name="amount" for="zoomer2">0</output>
</form>
med følgende javascript:
// init when loaded
var svgElt2 = document.getElementById('NOZ2');
document.getElementById("zoomer2").value=300;
function Zoom2(){
var v=document.getElementById("amount").value;
svgElt2.setAttribute("viewBox","0 0 "+(600-v)+" "+(600-v)+" ");
}
Panorering
Dette er vel ikke det mest typisk eksempelet på noe vi ønsker å panorere, men det er bare å bytte ut svg-elementet. Vi bruker scrollbarer i panoreringen, i stedet for input-range som vi brukte over. Andre alternativer er jQuerys slidere.
Dersom vi ønsker å panorere kan vi gjøre dette enklest ved å legge inn svg-elementet i et div-element med scrollbarer.
Dette oppnår vi enkelt ved å style den omgivende div-en slik:
#pano1{width:200px;height:200px;
overflow:auto;background-color:beige}
Eller vi kan panorere innholdet ved å endre viewBox
1 2 3
1 2 3
Her er følgende styling involvert:
/* styling scrollbarholders*/
.slidevertical,.slidehorizontal {
font-family:monospace;
font-size:10px;
color:transparent;
overflow: auto;
}
.slidevertical {
line-height:3000px;
width:50px;
max-height: 200px;
}
.slidehorizontal {
word-spacing:3000px;
line-height:18px;
max-width:200px;
}
og vi har lagt inn de to scrollbarene slik. De er konstruerte som scrollbarer til to elementer som ikke har noen annen hensikt enn å holde liv i scrollfunksjonen.
<pre onscroll="set();" id="vertical" class="slidevertical"> 1 2 3 </pre> <pre onscroll="set();" style="clear:left" id="horizontal" class="slidehorizontal"> 1 2 3 </pre>
Den involverte Javascript-koden:
var MAXVSCROLL=200;
var MAXHSCROLL=200;
var svgEltP2=document.getElementById("NOP2");
function set()
{
var yScroll=document.getElementById('horizontal').scrollLeft;
var xScroll=document.getElementById('vertical').scrollTop;
offSetX=5*yScroll/MAXHSCROLL;
offSetY=5*xScroll/MAXVSCROLL;
//console.log(offSetX,offSetY)
svgEltP2.setAttribute("viewBox",' '+(0+offSetX)+' '+(0+offSetY)+' 300 300');
}
function reset()
{
document.getElementById('vertical').scrollTop=0;
document.getElementById('horizontal').scrollLeft=0;
}
reset();
Du kan se panoreringseksemplene på en litt enklere side: pano https://borres.hiof.no/wep/svg/flag/pano.html
