使用JavaScript创建SVG标记 [英] Create SVG tag with JavaScript

问题描述

如何使用JavaScript创建SVG元素？我试过这个：

How do I create an SVG element with JavaScript? I tried this:

var svg = document.createElement('SVG');
    svg.setAttribute('style', 'border: 1px solid black');
    svg.setAttribute('width', '600');
    svg.setAttribute('height', '250');
    svg.setAttribute('version', '1.1');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
document.body.appendChild(svg);

然而，它会创建一个零宽度和零高度的SVG元素。

However it creates an SVG element with zero width and zero height.

推荐答案

试试这个：

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '600');
svg.setAttribute('height', '250');
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
document.body.appendChild(svg);

这篇关于使用JavaScript创建SVG标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！