使用HTML内的javascript动态创建SVG元素

70

我想在HTML页面内创建一个矩形，然后在该矩形上写一些文本。我还需要该文本作为超链接。这是我所做的，但是没有用：

    <!DOCTYPE html>
<html>
<body>

<script>

    var svg   = document.documentElement;
    var svgNS = svg.namespaceURI;

    var rect = document.createElementNS(svgNS,'rect');
    rect.setAttribute('x',5);
    rect.setAttribute('y',5);
    rect.setAttribute('width',500);
    rect.setAttribute('height',500);
    rect.setAttribute('fill','#95B3D7');
    svg.appendChild(rect);
    document.body.appendChild(svg);

    var h=document.createElement('a');
    var t=document.createTextNode('Hello World');
    h.appendChild(t);
    document.body.appendChild(h);


</script>

</body>
</html>

你能帮忙吗？谢谢。

javascript html svg

— 用户名
source

1

使用JavaScript创建SVG标签的

— Zeimyth's

OP，您应该接受答案或解释缺少的内容。

— DenysSéguret16年

1

请参阅@DenysSéguret的评论 google.com/...

— 阿伦

108

更改

var svg   = document.documentElement;

至

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

这样您就可以创建一个SVG元素。

为了使链接成为超链接，只需添加一个href属性：

h.setAttributeNS(null, 'href', 'http://www.google.com');

示范

— 丹尼斯·塞古雷
source

好的，我会。文本有效，但我想更改其位置。我希望将其显示在矩形上，例如在rect的中间。

— user2746087 2013年

请注意，该链接是html锚标记，如果您希望它位于svg内，则需要创建一个<svg：text>元素（在svg命名空间中）和一个<svg：a>元素，然后附加这些元素到svg。参见例如stackoverflow.com/questions/19132443/…。

— ErikDahlström2014年

感谢您的演示

— vnxyz

36

将此添加到html：

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

尝试以下功能并适应您的程序：

var svgNS = "http://www.w3.org/2000/svg";  

function createCircle()
{
    var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null,"id","mycircle");
    myCircle.setAttributeNS(null,"cx",100);
    myCircle.setAttributeNS(null,"cy",100);
    myCircle.setAttributeNS(null,"r",50);
    myCircle.setAttributeNS(null,"fill","black");
    myCircle.setAttributeNS(null,"stroke","none");

    document.getElementById("mySVG").appendChild(myCircle);
}

— 亚历克斯·蒙加（Alex Moanga）
source

34

为了方便svg编辑，您可以使用中间功能：

function getNode(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v)
    n.setAttributeNS(null, p, v[p]);
  return n
}

现在您可以编写：

svg.appendChild( getNode('rect', { width:200, height:20, fill:'#ff0000' }) );

示例（具有改进的getNode函数，允许使用驼峰形的驼峰式属性，例如strokeWidth> stroke-width）：

function getNode(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v)
    n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
  return n
}

var svg = getNode("svg");
document.body.appendChild(svg);

var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' });
svg.appendChild(r);

var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 });
svg.appendChild(r);

展开摘要

— 约瑟夫·梅德里格纳克（Joseph Merdrignac）
source

1

请注意，如果尝试设置属性“ viewBox”，“驼峰到短划线功能”将为您解决。

— 克里斯K，

没错，我们应该处理一些例外情况以使其正常运行

— Joseph Merdrignac

3

@chris我们可以编写"stroke-width":2，测试它，效果很好。省略replace前v [p]，如果属性名称中包含短划线，请在属性名称中使用引号。混合不带引号的简单属性和带引号的虚线也可以。

— Cee McSharpface '18年