Question

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

此外，SVG的宽度和高度设置为100％，因此计算比例因子将是一种简单的公式，如：

desiredWidth / svgWidth and desiredHeight / svgHeight无效。为了获得svg的宽度和高度，我使用getBoundingClientRect方法。上面的公式不起作用的原因是两个svgs在它们是相同的“符号”但具有不同宽度和高度的意义上相似，需要缩放到相同的desiredWidth和desiredHeight。上面的公式不会将它们扩展到相同的宽度和高度，即使它们看起来相同（相同的desiredWidth，desiredHeight和“symbol”）。

以下是一个示例小提琴：http://jsfiddle.net/k_ken/eZP4x/2/

非常感谢任何有关此的帮助或建议。

Answer 1

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

     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 here http://jsfiddle.net/eZP4x/4/

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

将SVG缩放到宽度和高度

1 个答案: