SVG上的窗口大小調整jQuery

Question

SVG看起來像：

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

我原來的大小調整腳本：

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)');
}

僅在頁面加載后才調整svg的大小，並且不會動態調整大小。 因此，我在窗口上的新jQuery在這里調整大小：

$(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)');
    }
});

這是我調整大小的jQuery。 我想根據客戶端窗口的大小來調整元素“ g”的大小。 但是，此jQuery無法正常工作。 控制台中沒有警告或錯誤，並且DOM中似乎存在一些問題，無法更改元素g。

關於我的代碼或更好的方案的任何信息都將有所幫助。 謝謝。

Answer 1

如果將<svg>的viewBox ， width和height屬性設置為正確的值，瀏覽器將為您縮放所有內容。

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%');

在這里演示

如果您需要寬度和高度特定（而不是“ 100％”），則只需修改最后兩行即可。 無需修改<g>元素。

PS。 請注意，您不能信任jQuery正確地修改SVG的屬性。 它是為HTML設計的，而不是為SVG設計的，並非總是做正確的事情。 通常最好使用香草Javascript，就像我在這里所做的那樣。

Answer 2

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)');
    }
}

最后根據我的原始代碼解決這個問題。 正如BigBadaboom提到並非常感謝您一樣，jQuery通常不適用於SVG內的元素，例如g，路徑，節點等。但是，它對於整個SVG元素都適用。