web-dev-qa-db-ja.com

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>

助けてもらえますか？ありがとう。

javascripthtmlsvg
54
user2746087

変化する

var svg   = document.documentElement;

に

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

SVG要素を作成します。

リンクをハイパーリンクにするには、単にhref属性を追加します。

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

デモ

89
Denys Séguret

これを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);
}
32
Alex Moanga

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);
28
Joseph Merdrignac