首页 文章

将SVG缩放到宽度和高度

提问于
浏览 次
0

我遇到了一个问题，我想将多个svgs缩放到给定的宽度和高度 . 每个svg元素都需要缩放到宽度和高度 . 我必须使用viewbox属性，但它不起作用 . 我使用了几个代数公式来计算比例因子但无济于事 .

此外，SVG的宽度和高度设置为100％，因此计算比例因子将是可行的方法，但简单的公式如下：

desiredWidth / svgWidth and desiredHeight / svgHeight 无效 . 要获得svg的宽度和高度，我使用 getBoundingClientRect 方法 . 上面的公式并没有将它们扩展到相同的宽度和高度，即使它们看起来相同（相同的desiredWidth，desiredHeight和"symbol"） .

这是一个小提琴样本：http://jsfiddle.net/k_ken/eZP4x/2/

非常感谢任何帮助或建议 .

javascript svg

1 回答

  • 2

    你大部分都在那里，但代码和未定义元素中有一些错误 . 您可以这样做，也可以更改视图 . 修改你的代码会让我得到类似下面的内容......

    var element1 = document.getElementsByClassName("svg1")[0].firstElementChild;
     var rect1 = element1.getBoundingClientRect();
     var element2 = document.getElementsByClassName("svg2")[0].firstElementChild;
     var rect2 = element2.getBoundingClientRect();
     var desiredWidth = 90;
     var desiredHeight = 120;

     element1.setAttribute("transform", "translate(103,93) scale(" + desiredWidth / rect1.width + "," + (desiredHeight / rect1.height) + ")");

     element2.setAttribute("transform", "translate(282,93) scale(" + desiredWidth / rect2.width + "," + (desiredHeight / rect2.height) + ")");

    jsfiddle在这里http://jsfiddle.net/eZP4x/4/

    （如果firstElementChild存在问题，您可能希望使用childNodes [1]或将id设置为要操作的组，而不是使用svg元素 .

    回复于

相关问题