BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] HTML内でjavascriptを使用してSVG要素を動的に作成する

2023-09-06 19:11:03

質問

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>

助けてくださいませんか？ ありがとうございます。

どのように解決するのですか？

変更 

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

デモンストレーション

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します