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

如果您将viewBox的{{1}}，width和height属性设置为正确的值，浏览器会为您缩放所有内容。

<svg>

Demo here

如果您需要宽度和高度是特定的（而不是“100％”），只需修改最后两行。无需进入并修改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%');元素。

PS。请注意，您无法信任jQuery正确修改SVG的属性。它是为HTML设计的，而不是SVG，并不总是做正确的事情。通常最好使用vanilla 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元素都适用。

窗口调整SVG上的jquery

2 个答案: