46

我正在尝试更改 JavaScript 中的 SVG 元素视图框。基本上，我正在绘制一个二叉搜索树，当它变得太宽时，我想改变视图框以缩小以便树适合窗口。我目前正在使用：

if(SVGWidth>=1000){
  var a = document.getElementById('svgArea');
  a.setAttribute("viewbox","0 0 " + SVGWidth + " 300");
}

HTML 是：

<svg id="svgArea" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="1000" height="300" viewBox="0 0 1000 300">

我也尝试过使用 setAttributeNS('null',...) 但这似乎也不起作用。我注意到的一件奇怪的事情是，当我 alert(a) 时，它给出的 [object SVGSVGElement] 看起来很奇怪。任何帮助表示赞赏。

4

3 回答 3

90

很高兴看到 svg 的上下文，但以下内容对我来说适用于纯 SVG 文档：

shape = document.getElementsByTagName("svg")[0];
shape.setAttribute("viewBox", "-250 -250 500 750");

也许是因为viewBox区分大小写？

于 2012-04-10T08:05:17.250 回答
12

您的代码中有错误：“viewbox”与“viewBox”不同...B 为大写。将代码更改为：

a.setAttribute("viewBox","0 0 " + SVGWidth + " 300");
于 2014-10-17T18:05:47.250 回答
0

我有一个非常相似的用例，其中调整 SVG 的大小对于响应式设计至关重要。

const windowWidth = window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;

const windowHeight = window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

// used getElementById for specific SVG
const shape = document.getElementById("background-svg");

function onWindowResize(){
console.log(windowWidth, windowHeight);

if (windowWidth < 600 || windowHeight < 900) {
  shape.setAttribute("viewBox", "0 0 400 800");
}

// Added an Event Listener
window.addEventListener("resize", onWindowResize);

这种方法对我来说效果很好，我希望还有改进的空间，很高兴找到替代解决方案。快乐编码！

于 2021-09-21T06:37:34.223 回答