0

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

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

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

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

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

4

1 回答 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 元素）。

于 2013-11-13T15:45:49.033 回答