CODEWITHSUNDEEP
javascriptjquerysvg
Felix Wang
Felix Wang

Reputation: 73

Window resize jquery on SVG

Svg looks like: 

<svg width=xxx height=xxx>
    <g width=xxx height=xxx>
    </g>
</svg>

My original resize script:

var desiredWidth1=$('svg').attr("width"); 
var scaleVal1=$(window).width()/desiredWidth1; 

var desiredWidth2=$('svg').attr("height"); 
var scaleVal2=$(window).height()/desiredWidth2; 

var originalTrans = $('svg').attr('transform');

if(scaleVal1>scaleVal2){
    $('svg').css("-webkit-transform","scale("+scaleVal2+")");
    $('svg').attr("transform", 'translate('+80*scaleVal2+',0)');
}
else{
    $('svg').css("-webkit-transform","scale("+scaleVal1+")");
    $('svg').attr("transform", 'translate('+80*scaleVal1+',0)');
}

It only resizes the svg once the page loaded, and it is not dynamically resizing. Therefore my new jquery on window resize here:

$(window).on("resize","g",function(){
    var desiredWidth1=$("svg").attr("width"); 
    var scaleVal1=$(window).width()/desiredWidth1; 

    var desiredWidth2=$("svg").attr("height"); 
    var scaleVal2=$(window).height()/desiredWidth2; 

    if(scaleVal1>scaleVal2){
        $("g").css("-webkit-transform","scale("+scaleVal2+")");
        $("g").attr("transform", 'translate('+80*scaleVal2+',0)');
    }
    else{
        $("g").css("-webkit-transform","scale("+scaleVal1+")");
        $("g").attr("transform", 'translate('+80*scaleVal1+',0)');
    }
});

This is my resize jquery. I want to resize the element 'g' based on client window size. However this jquery is not working properly. There is no warning or error in console, and it seems to be some problems in DOM and cannot change the element g.

Any information on my code or better scenarios would be helpful. Thanks.

Upvotes: 0

Views: 3698

Answers (2)

Felix Wang
Felix Wang

Reputation: 73

window.onload = function(){//First open resize
    var desiredWidth1=$('svg').attr("width"); 
    var scaleVal1=$(window).width()/desiredWidth1; 

    var desiredWidth2=$('svg').attr("height"); 
    var scaleVal2=$(window).height()/desiredWidth2; 

    var originalTrans = $('svg').attr('transform');

    $('svg').css("transform-origin","left");

    if(scaleVal1>scaleVal2){
        $('svg').css("-webkit-transform","scale("+scaleVal2+")");
        $('svg').css("-ms-transform","scale("+scaleVal1+")");
        $('svg').attr("transform", 'translate('+80*scaleVal2+',0)');
    }
    else{
        $('svg').css("-webkit-transform","scale("+scaleVal1+")");
        $('svg').css("-ms-transform","scale("+scaleVal1+")");
        $('svg').attr("transform", 'translate('+80*scaleVal1+',0)');
    }
}


window.onresize = function() {//Dynamically resize the svg to fit the window
    var desiredWidth1=$("svg").attr("width"); 
    var scaleVal1=$(window).width()/desiredWidth1; 

    var desiredWidth2=$("svg").attr("height"); 
    var scaleVal2=$(window).height()/desiredWidth2; 

    if(scaleVal1>scaleVal2){
        $("svg").css("-webkit-transform","scale("+scaleVal2+")")
        $("svg").css("-ms-transform","scale("+scaleVal2+")")
        $("svg").attr("transform", 'translate('+80*scaleVal2+',0)');
    }
    else{
        $("svg").css("-webkit-transform","scale("+scaleVal1+")");
        $("svg").css("-ms-transform","scale("+scaleVal1+")");
        $("svg").attr("transform", 'translate('+80*scaleVal1+',0)');
    }
}

Finally work this out based on my original codes. As BigBadaboom mentioned and thank you very much, jQuery is usually not working for elements inside the SVG, such as g, path, node etc. However, it just works fine for the whole SVG element.

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101918

If you set the viewBox, width and height attributes of the <svg> to the right values, the browser will scale everything for you.

var  svg = $("#mysvg").get(0);

var w = svg.width.baseVal.value;
var h = svg.height.baseVal.value;
svg.setAttribute('viewBox', '0 0 '+w+' '+h);
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');

Demo here

If you need the width and height to be something specific (rather than "100%"), just modify those last two lines. No need to go in and modify the <g> element.

PS. Note that you can't trust jQuery to modify the attributes of the SVG correctly. It is designed for HTML, not SVG and doesn't always do the right thing. It is usually better to use vanilla Javascript as I have done here.

Upvotes: 1

Related Questions