使用 JavaScript 操作 SVG 视图框（无库）答案

【问题标题】：Manipulate SVG viewbox with JavaScript (no libraries)使用 JavaScript 操作 SVG 视图框（无库）
【发布时间】：2012-04-10 07:57:10
【问题描述】：

我正在尝试更改 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] 看起来很奇怪。任何帮助表示赞赏。

【问题讨论】：

我可以知道你为什么不想使用库吗？
我应该补充一下，SVGWidth 可能是一个错误的变量名，应该只是 treeWidth。此外，SVG 的 html 是：
我没有使用库，因为我专注于学习 JavaScript。我的下一个项目将添加库，但我认为最好从原生 JavaScript 开始。
@aclear16 ：可能使用库来实现这一点会令人沮丧，因为它应该可以工作，而且它只会限制 OP 对 DOM 操作的一般理解（因此他们将受制于图书馆）。虽然不应该期望我们理解到汇编级别的东西，但了解您已经在其中工作的东西实际上是如何工作的总是有帮助的，而不是依赖于库。

标签： javascript svg viewbox

【解决方案1】：

查看 svg 的上下文会很好，但以下内容对我来说适用于纯 SVG 文档：

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

可能是因为viewBox 区分大小写？

【讨论】：

这样看，如果不是那么容易，那就更难了。直到现在我才尝试过弄乱实际的 svg 元素属性，所以我们都想出了一些办法。
我也犯了同样的错误。
对于动态创建的 SVG，需要使用 createElementNS 创建 SVG 元素，否则设置属性 viewBox 将不起作用。参考：stackoverflow.com/questions/28734628/…
更准确地说，DOM SVG 对象只有viewBox 属性。 is 没有 viewbox 属性，即使你在 HTML 中写了 viewbox
我相信这应该是setAttributeNs(null, "viewBox", ...) 并且setAttribute 发生可以工作，但将来可能无法工作。如果我弄错了，请纠正我，因为我对此不是 100% 确定的。

【解决方案2】：

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

a.setAttribute("viewBox","0 0 " + SVGWidth + " 300");

【讨论】：

嗯，我认为现在的答案是确实回答了这个问题。 'b' 是它不起作用的原因。但是，user3434597 应该先阅读@Anthony 的旧答案。也许他会删除这个。

【解决方案3】：

我有一个非常相似的用例，其中调整 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);

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

【讨论】：