javascript - 将 SVG' 缩放到宽度和高度

Question

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

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

desiredWidth/svgWidth 和desiredHeight/svgHeight 不起作用。为了获取 svg 的宽度和高度，我使用 getBoundingClientRect 方法。上面的公式不起作用的原因是，两个相似的 svgs 是相同的“符号”，但宽度和高度不同，需要缩放到相同的desiredWidth和desiredHeight。上面的公式不会缩放到相同的宽度和高度，即使它们应该看起来相同(相同的desiredWidth、desiredHeight和“symbol”)。

这是一个示例 fiddle :http://jsfiddle.net/k_ken/eZP4x/2/

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

Answer 1

大部分内容都已完成，但代码中存在一些错误和未定义的元素。您可以这样做，也可以更改 View 框。修改你的代码会让我得到类似下面的结果......

     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元素)。