Change svg polygon attributes via Javascript

Question

I am trying to scale and translate svg polygon elements, depending on the browser window size. Calculating how much I want to scale and translate is not the problem, but changing the polygons is for me.

I am hoping you can help...

I have broken the issue down so that I count the number of polygons (this is ok):

function countnumberofPolygons() {
    numberofPolygons = document.getElementsByTagName("polygon").length;
    return numberofPolygons;
}

and a function that creates a string for determining the transform="" attribute of the polygon - the transform attribute can be say - transform="translate(800,00) scale(1.2)"

function createsvgtransformattribute(){
    transformattribute = '"translate('+ translateAmount +',0) scale(' + scaleAmount + ')"';
}

but looping through them and setting their attributes doesn't seem to work. I've broken it all down and built it back up - but end up with this - which is wrong, probably in some simple way....

function changeattributes(numberofPolygons, transformattribute){
    for (var q=0;q< numberofPolygons;q++){
        document.getElementsByTagname("polygon")[q].setAttribute("transform", transformattribute);
    }
}

But even when inserting the value of the string transformattribute manually, it doesn't work. Can you help please?

Answer 1

In the html I used the document read Jquery function and onresize to call svgscale(). There are a few oddities in the script - like the left side nudge - but hopefully it should work for others.

I have converted images in image tags to a div that has the image as a background-image. The image maps are then pulled into svg. Then this script uses the transform attribute of the svg to scale and translate the polygons of the image map accordingly.

var winWidth;
var winHeight;

var MainImageHeight;
var MainImageWidth;

var HeightRatio;                
var imageWidth;

var leftoffset;
var ImgVsOriginal;

var offsetnudge;
var offsetnudgescaled;
var los;
var translateAmount;
var scaleAmount;

var numberofNodes;
var numberofPolygons;
var polygonArray;
var transformattribute;


function setVariables(){

                                //Browser window widths and heights
                winWidth = window.innerWidth;
                winHeight = window.innerHeight;

                                                //Widths and heights of the element with the MainImage id
                MainImageHeight =   document.getElementById('MainImage').offsetHeight;
                MainImageWidth =    document.getElementById('MainImage').offsetWidth;

                                                //Establishes the ratio between the height of the element and the background image it displays,
                                                //which has a height of 920px
                                                //The MainImage resizes the background image so the ratio is needed to scale the svg/imagemap
                HeightRatio = MainImageHeight/920;

                                                //This establishes the width of the background image as presented - the background image file is 1400px
                imageWidth = HeightRatio*1400;

                                                //The Background image is centered and covers the screen. So there is space either side of the background image
                                                //This space is worked out here, and halved to work out the left-hand side portion of the space
                leftoffset = (winWidth-imageWidth)/2;

                                                //The original imagemap was created based on an image displayed as 960px by 653px. This calculates the ratio between them.
                ImgVsOriginal = MainImageHeight/653;

                                                //The original image was based on images with a small border each side. This is a hard-adjustment for this.
                offsetnudge = 30;

                                                //Scales the offset for this border based on the background image size vs the original
                offsetnudgescaled = offsetnudge*ImgVsOriginal;

                                                //Creates an easy to type variable based on 
                //los = leftoffset + offsetnudgescaled;
                translateAmount = leftoffset + offsetnudge;
                scaleAmount = ImgVsOriginal;
                                                //Creates variable for idname
                 var idname;      
                }






function createsvgtransformattribute(){
                transformattribute = 'translate('+ translateAmount +',0) scale(' + scaleAmount + ')';
                return transformattribute;
}


function countchildNodes(){
                numberofNodes = document.getElementById("svgstuff").childNodes.length;

                }

function printnumberofnodes(){
                document.write('<span>Number of Nodes:' + numberofNodes + '</span>');
}

function countnumberofPolygons(){
                numberofPolygons = document.getElementsByTagName("polygon").length;
                return numberofPolygons;
                }

function getpolygonArray(){
                polygonArray = document.getElementsByTagName("polygon");
}

function printnumberofPolygons(){
                document.write('<span>Number of Polygons:' + numberofPolygons + '</span>');
}







function changeattributes(){
                document.getElementById('test1').innerHTML='changed';
        for(q=0; q<polygonArray.length; q++){
        //document.getElementsByTagName('polygon')[q].setAttribute("class", "blue");
        document.getElementsByTagName('polygon')[q].setAttribute("transform", transformattribute);
        }
}




function svgscale(){
                setVariables();
                getpolygonArray();
                createsvgtransformattribute(translateAmount, scaleAmount);
                changeattributes();
        } 

Here are some example polygons for you:

<div id="MainImage">
    <svg onresize="svgscale()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    style="position:absolute;"
    width="2000" height="2000"
    pointer-events="visible">       
        <a xlink:href="1.htm" xlink:title="1">');   
            <polygon id="p1" class="" points="736,378 680,363 680,233 736,209 736,378" transform="" fill="" >
            </polygon>
        </a>
        <a xlink:href="2.htm" xlink:title="2">
            <polygon id="p2"class="area" points="839,161,742,204,739,513,831,587,839,161" transform="" fill="">

            </polygon>
        </a>
        <a xlink:href="3.htm" xlink:title="3">');   
            <polygon id="p3" class="area" points="521,286,521,296,557,297,555,287,521,286" transform="" fill="" >

            </polygon>
        </a>
        <a xlink:href="4.htm" xlink:title="4">');   
            <polygon id="p4" class="area" points="562,218,562,240,657,242,657,219,562,218" transform="" fill="" >

            </polygon>
        </a>
        <a xlink:href="5.htm" xlink:title="5">');   
            <polygon id="p5" class="area" points="952,273,909,275,905,276,902,347,858,344,846,351,845,356,855,361,845,542,849,546,849,572,846,573,845,575,841,652,954,652,952,273" transform="" fill="" >
            </polygon>
        </a>                    

    </svg>

</div>

I put some ids in the polygons in case I couldn't cycle through by TagName, but it works by obtaining the polygons by tagname and cycling through via a for loop. :-) The css for the #MainImage div is basically:

#MainImage {background-image: url('pix/file.jpg'); background-size: auto 100%;}

Answer 2

When you set a transform attribute using setAttribute you don't put it in double quotes. So what you need is

transformattribute = 'translate('+ translateAmount +',0) scale(' + scaleAmount + ')';