Question

我正在尝试在HTML中使用SVG标记来渲染一些图形。问题非常棘手，因为我刚刚意识到问题出在以编程方式生成SVG时。

标记

我希望在我的页面中最终得到的是这段代码：

<svg>
  <circle cx="20" cy="20" r="15"></circle>
</svg>

如果你把它粘贴在一个页面内，一切都很好，并呈现一个黑色圆圈！

动态创建SVG

但是我想用Javascript创建这个内容，所以我有这个：

var container = document.createElement("div");
var svg = document.createElement("svg");

var circle = document.createElement("circle");
circle.setAttribute("cx", "20");
circle.setAttribute("cy", "20");
circle.setAttribute("r", "15");

svg.appendChild(circle);
container.appendChild(svg);
document.body.appendChild(container);

好吧，尝试在小提琴或浏览器中执行此操作，您将看到它不会被渲染。检查HTML时，您会发现circle没有占用任何空间。

有什么问题？

Answer 1

你必须使用"document.createElementNS("http://www.w3.org/2000/svg", "svg");"来创建svg元素

＆＃13;

var container = document.createElement("div");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "20");
circle.setAttribute("cy", "20");
circle.setAttribute("r", "15");

svg.appendChild(circle);
container.appendChild(svg);
document.body.appendChild(container);

＆＃13;

Answer 2

虽然您必须使用 document.createElementNS("http://www.w3.org/2000/svg", "svg"); 创建父 svg 元素，您并不严格要求对子元素使用该方法来在您的页面上获得功能性图形。如果您使用具有多个路径、定义、样式、标题等的更复杂的图像，例如从绘图程序导出的内容，则为每个孩子调用 createElementNS() 可能会变得特别麻烦。

对我来说效果很好的一种更快的方法是创建父 svg 元素，然后将其所有内容一次性添加为 innerHTML。您的具体示例可以这样解决：

var container = document.createElement("div");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgContent = '<circle cx="20" cy="20" r="15"></circle>';

svg.innerHTML = svgContent;
container.appendChild(svg);
document.body.appendChild(container);

Answer 3

<svg>
  <circle cx="20" cy="20" r="15"></circle>
</svg>

浏览器不呈现动态创建的SVG元素

标记

动态创建SVG

3 个答案: