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

我想在 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>

你能帮帮我吗？ 谢谢。

173701 次浏览
小开
最佳答案

Change

var svg   = document.documentElement;

to

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

so that you create a SVG element.

For the link to be an hyperlink, simply add a href attribute :

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

Demonstration

小开

Add this to html:

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

Try this function and adapt for you program:

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);
}
小开

To facilitate svg editing you can use an intermediate function:

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
}

Now you can write:

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

Example (with an improved getNode function allowing camelcase for property with dash, eg 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);

小开 

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

小开

Elements can easily be added using the fragment.

Example

<input style="width:300px" type="text" placeholder="Input something to change the text." /><br>
<script>
const frag = document.createRange().createContextualFragment(`
<svg width="250" height="250">
<rect x="0" y="0" width="250" height="250" fill="#95B3D7"></rect>
<a href="https://www.google.com" style="cursor: pointer" target="_blank">
<text x="10" y="130" style="
font-size: 48px;
fill:#faff00;">
Hello world</text>
</a>
</svg>
`)
const textElem = frag.querySelector("text")
document.querySelector("input").onchange = (e) => {
textElem.textContent = e.target.value
}
document.body.append(frag)
</script>


提交答案