2

我想从 JavaScript 函数中确定元素的 viewBox（即 SVGSVGElement）。来电：

svgElement.getAttribute("viewBox")

当 viewBox 在元素上显式设置时效果很好。但我不能假设情况总是如此。例如，我希望我的函数适用于所有这些标签：

(400, 100) <svg width=400 height=100></svg>
(400, 100) <svg width="400px" height="100px"></svg>
(400, 100) <svg style="width: 400px; height: 100px"></svg>
(100,  25) <svg viewBox="0 0 100 25" style="width: 400px; height: 100px"></svg>
(100,  25) <svg viewBox="0 0 100 25" width=400 height=100></svg>

（括号中的值是函数在每种情况下应返回的值）。我希望能够在所有支持 SVG 的浏览器和所有缩放级别上执行此操作。

这是一个尝试（失败）的 JSFiddle：http: //jsfiddle.net/w4BTD/1/

4

2 回答 2

2

我知道这个问题相当老了..但我最近开始在跨浏览器上使用 SVG 并遇到了同样的问题。

给定一堆 SVG 文件，有些带有 viewBox，有些没有，每个浏览器在显示它们时的反应都会有所不同。

关键部分，也是我在这个网站上找不到的部分是，可以通过使用 DOMParser() 来假设 viewBox。

有了这个，丢失的 viewBox 可以在显示 svg 之前设置。

这是一个简化的示例，但它可能会帮助其他遇到同样问题的人：

//Parsing a svg-string ('<svg ...></svg>') to an actual element
var tP = new DOMParser().parseFromString(s, 'image/svg+xml');

//Assuming no errors happened, this is going to be the <svg>
tS = document.importNode(tP.documentElement, true);

//Check for a viewBox attribute
var tV = tS.getAttribute('viewBox');

//If it does not exists, it gets set to the actual document dimensions which are provided by the parser
(!tV) && tS.setAttribute('viewBox', [0, 0, tP.documentElement.attributes.width.value, tP.documentElement.attributes.height.value].join(' '));
于 2016-11-09T09:43:25.700 回答
0

视图框用于指定一组给定的图形拉伸以适应特定的容器元素。当您需要该行为时，应设置此属性。

将属性设置为与 svg 元素相同的大小会有点多余（如果您不打算更改它），您可以使代码更小，但这是不必要的，甚至是错误的。

我会检查是否设置了 viewbox 属性，如果没有，请询​​问 svg 的大小，这将是相同的。SVG规范不会帮助你...

于 2012-10-23T01:48:54.330 回答