使用 JavaScript 创建 SVG 标签

IT技术 javascript svg
2021-01-20 12:55:07

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

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 元素。

2个回答

你忘了命名空间URI你的svg元素和xmlns属性。

此外，version被所有浏览器忽略。

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);

如果您要使用xlink:href标签，则绝对有必要。否则，没有那么多。
2021-03-24 12:55:07
“svg：svg”？普通的旧“svg”也可以正常工作。此外，所有浏览器都会忽略“版本”，因此添加它有点浪费。
2021-03-26 12:55:07
谢谢@ErikDahlström，已更正。那么 svg.setAttributeNS(" w3.org/2000/xmlns/ "," xmlns: xlink"," http://... ); 呢？命名空间真的有必要吗？
2021-04-05 12:55:07

.createElementNS是svg和path元素的必需方法。下面举例。

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var path1 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
var path2 = document.createElementNS("http://www.w3.org/2000/svg", 'path');

svg.setAttribute("aria-hidden","true");
svg.setAttribute('viewbox', '0 0 24 24');
svg.setAttribute('width', '24px');
svg.setAttribute('height', '24px');

path1.setAttribute('d', 'M0 0h24v24H0z');
path1.setAttribute('fill', 'none');

path2.setAttribute('d', 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z');
path2.setAttribute('fill', '#2962ff');

svg.appendChild(path1);
svg.appendChild(path2);
document.body.appendChild(svg);

对于那些在开发人员工具中查看 DOM 的人，不要被愚弄 - 如果您使用innerHTML或outerHTML直接分配 svg 标记，您将xmlns=http://www.w3.org/2000/svg在树中的标记表示中看到 。如果您使用，createElementNS您将看不到它，但它仍然存在！您必须使用，createElementNS否则 ns 将不在那里。我的关键问题是，当使用 JS 并添加 时，path您不需要显式的 ns 声明 with innerHTML，它会继承。如果您使用createElement，它不会继承，因此您还必须使用createElementNS.
2021-03-24 12:55:07
其它你可能感兴趣的问题
上一篇以点表示法转换字符串以获取对象引用 下一篇如何在 JSP 页面中的选项标签上使用 onClick() 或 onSelect()？