怎么用javascript 动态修改svg的 viewbox属性?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用javascript 动态修改svg的 viewbox属性?相关的知识，希望对你有一定的参考价值。
直接svg.viewBox="0 0 20 20"这样赋值没反应,难道只能在标签里写死?
参考技术A 首先1处改成node=svgdoc.createElementNS('svg','rect');是必须的，这样才能创建一个svgRect元素。其次，IE8不支持svg。IE9以上在运行这个文件的时候会屏蔽动态内容，在页面下方会有提示，点击允许就行了。火狐和chrome可以直接运行这个文件。 参考技术B svg.setAttribute("viewBox", "0 0 20 20");本回答被提问者采纳如何使用javascript动态更改html中svg的文本内容
【中文标题】如何使用javascript动态更改html中svg的文本内容【英文标题】：How to dynamically change the text content of svg in html with javascript 【发布时间】：2015-09-22 15:57:59 【问题描述】：我的要求是从g 和另一个文本元素中删除文本元素。
但是当我运行这段代码时，写入的文本被完美地删除，但没有显示添加新的文本标签。当我打开 Chrome 的开发人员部分时，它会显示我添加的 text 标签，但它没有显示在视图中。当我从 chrome 的开发人员部分更新任何内容时，DOM 会再次重新加载，我的新文本将显示在视图中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>
<script>
var s = document.getElementById('t');
var g = s.childNodes[1];
console.log(g.childNodes[1].remove());//remove text must in my case
var txt = document.createElement('text');
txt.setAttribute('x', '10');
txt.setAttribute('y', '10');
var t = document.createTextNode("This is a paragraph.");
txt.appendChild(t);
g.appendChild(txt);
</script>
</body>
</html>
【问题讨论】：
您的问题还有问题吗？还是其中一个答案帮助您解决了这个问题？ 现在解决了。谢谢 如果其中一个答案解决了您的问题，请accept it like described here。如果您自己解决了问题，请将您的解决方案作为答案发布。 【参考方案1】：如果您想更改文本，您不必删除整个元素并重新创建它。您可以通过选择文本元素并为其设置新内容来简单地更改文本内容，如下所示：
document.getElementById('t').childNodes[1].childNodes[1].innerHTML= "This is a paragraph";
在此处查看工作示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>
<script>
document.getElementById('t').childNodes[1].childNodes[1].innerHTML= "This is a paragraph";//remove text must in my case
</script>
</body>
</html>【讨论】：
【参考方案2】：创建 SVG 元素时必须使用 createElementNS
document.createElementNS('http://www.w3.org/2000/svg', 'text');
FIDDLE
【讨论】：
先生，您能解释一下我如何使用 foreignObject 代替您动态创建的文本标签吗？在那个 foriegnObject 中，我必须使用文本标签。 foreignObject 和 text 标签都是动态创建的。【参考方案3】：如果你在 d3 中工作，你可以简单地做
d3.select('#svgTextId').html(newHTML).
【讨论】：
以上是关于怎么用javascript 动态修改svg的 viewbox属性?的主要内容，如果未能解决你的问题，请参考以下文章