Question

我已经加载了svg元素，我想得到的不是宽度或高度，而是实际比例。所以例如1意味着正方形。 2可以表示（宽度/高度）宽度是高度的两倍。等等。

我用谷歌搜索但没有发现任何可靠（或有效）的东西。到目前为止，我发现自己可以访问width和height属性，然后animVal，然后value。所以这个比例是：

ratio = svg.width.animVal.value / svg.height.animVal.value;

问题是animVal也是unitType，如果宽度的单位类型与高度不同，该怎么办？嗯，他们会不同吗？

我用Inkscape创建了SVG，这就是我在JS中加载SVG的方式：

$.get(svg_url, function(data) {
    // Get the SVG tag, ignore the rest
    svg = $(data).find('svg')
            .attr('id', 'SVG')
            // Remove any invalid XML tags as per http://validator.w3.org
           .removeAttr('xmlns:a')
           [0];

    on_load();
}, 'xml');

代码来自How to change color of SVG image using CSS (jQuery SVG image replacement)?。我后来的内容是svg元素。

这不是如何加载SVG或如何处理跨域问题的问题。 SVG加载正常，它与脚本（我的磁盘）是相同的域。

Answer 1

您还可以在JavaScript中尝试image元素的 naturalHeight 和 naturalWidth 属性。例如：

var img = document.createElement('img');
img.src = 'example.svg';
img.onload = function(){

    alert( img.naturalHeight/img.naturalWidth );

}

Answer 2

value字段将单位转换为用户单位（即无单位），因此您使用它的任何单位都可以正常工作。

如果由于某种原因你想要提供单位中的值，那么你就要编写animVal.valueInSpecifiedUnits了。

Answer 3

它适用于我（在将内容附加到html之后）

console.log('SVG size: ' + svg.offsetWidth + '×' + svg.offsetHeight);
$('#svgCont').append(svg);
console.log('SVG size: ' + svg.offsetWidth + '×' + svg.offsetHeight);

如何以可靠的方式获得SVG的大小比例？

3 个答案: