JavaScriptライブラリを使って、インラインSVGに変換した画像要素にaタグを追加したい

Question

前提

よろしくお願いします。
SVG画像をimg画像として取り込み、JavaScriptライブラリ「deSVG」を使ってインラインSVGに変換しています。
そのデータにaタグを追加したいのですが、jQueryでコードを入力しても追加できませんでした。
HTMLを直接触ることができないプログラムなので、SVGを直接HTMに記載したり、aタグを追加したりする事ができず、対処方法がわからず困っております。

jQueryも詳しくなく、自分なりに調べて半日頑張ってみましたが、何もヒントが掴めずにおりまして、
解決策がわかる方がいらっしゃいましたら、お願いいたします。

実現したいこと

インラインSVGに変換した画像要素に、動的にaタグを追加したい。
<g></g>タグをaタグで囲みたいです。

発生している問題・エラーメッセージ

エラーは何も出ていません。
検証画面ではSVGコードが見えますが、ページのソースを表示すると下記の内容（イメージのリンクURLのみ）しか記載がありませんでした。

<div class="●●"><img src="https://●●●.svg" class="●●"></div>

該当のソースコード

SVGのgタグについているIDにaタグを追加

$(window).on('load',function() {
		$('#●●).wrap('<a href="./"></a>');
  });

試したこと

jQueryの読み込みの順番を変えてみましたが、変化がありませんでした。

補足情報（FW/ツールのバージョンなど）

詳しい方がいらっしゃいましたら、教えていただけると嬉しいです。
どうぞよろしくお願いいたします。

Answer 1

インラインsvg内の要素の属性をいじる場合はsetAttributeNSを利用ください

参考

※調整して簡素化しました

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const circle=document.querySelector('#circle');
  const a=document.createElementNS('http://www.w3.org/2000/svg','a');
  a.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','https://teratail.com/');
  circle.parentNode.insertBefore(a,circle);
  a.appendChild(circle);
});
</script>
<svg width="200" height="200" type="image/svg+xml" >
　　 <circle id="circle" cx="100" cy="100" r="50" fill="red"/>
</svg>

Comments

[kuwagata-1111]

yambejpさん、早速教えていただき、ありがとうございます。
ちょっと調べた限りにはすぐには理解できなさそうなので、もう少し読みこんで試してみたいと思います。
とても困っていまして、早々にご回答いただき大変嬉しかったので、取り急ぎお礼だけ言わせてください。
本当にありがとうございます。
試してみてまたご質問させていただくかもしれませんが、よろしくお願いいたします。

[yambejp]

svgの適当な要素にあとからリンクを設定する方法を参考までに追記しておきました

[kuwagata-1111]

yambejpさん
追加で情報いただき、ありがとうございます。
ずうずうしく質問させていただきたいのですが、
・SVGにidがプラログラムからはつけられず、クラスだけついているのですが、クラスで代用しても良いのでしょうか？
・下記の１つ目の””と、３つ目の""はどれを入れれば良いでしょうか？３つ目は追加したいaタグのリンク先でしょうか？？
a.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','https://teratail.com/');
お時間ある時で大丈夫ですので、教えていただけましたら幸いです。
お手数ですが、よろしくお願いいたします。

[yambejp]

> SVGにidがプラログラムからはつけられず

今回のソースでsvg自体をつかむ必要はなかったですね。
回答調整しました。
掴む必要がある場合は、id以外の方法でも問題ありません

> 下記の１つ目の””と、３つ目の""はどれを入れれば良いでしょうか？

１つ目はルールなので必ずこれを入れてください
３つ目はすきなリンク先を指定してください

[kuwagata-1111]

ご丁寧に教えていただき、ありがとうございます。
教えていただいたように下記のコードを入れたところ、

window.addEventListener('DOMContentLoaded', ()=>{
const store=document.querySelector('#store');
const a=document.createElementNS('http://www.w3.org/2000/svg','a');
a.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','https://teratail.com/');
store.parentNode.insertBefore(a,store);
a.appendChild(store);
});

下記のエラーが出てしまいました。

Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
at 〜

parentNodeの箇所の事を何か言ってみるようなのですが、どこをどのように修正すれば良いでしょうか。。。
立て続けの質問で申し訳ありませんが、お時間ありましたらよろしくお願いいたします。

[yambejp]

おそらくそのライブラリの問題なので、ちょっとわかりかねます。
見た感じstoreというidをつけた要素がないみたいですね

Answer 2

SVGの中では SVG 名前空間の <a> を使用する必要があります。jQuery の wrap() で文字列を渡すとおそらく HTML の <a> を生成するので動かないのでしょう。

たぶん、以下のようにすればできるんじゃないでしょうか(未確認):

let svgA = document.createElementNS(
    'http://www.w3.org/2000/svg', 'a');
svgA.href = './';
$('#●●').wrap(svgA);

Comments

[kuwagata-1111]

int32_tさん、ご連絡いただきありがとうございました。
お二人の回答を見て、HTMLをどうにかする訳ではないという事だけは理解できました。
setAttributeNSもcreateElementNSも初めて聞く言葉で難しそうですが、頑張って勉強したいと思います。

とりあえず教えていただいたコードをコピーしてみましたが、こちらは残念ながら動かないようです。
コピーが間違っているかもしれません、問題がありましたら教えていただけましたら幸いです。

let svgA = document.createElementNS(
'http://www.w3.org/2000/svg', 'a');
svgA.href = './';
$('#store).wrap(svgA);

早々に教えていただき、大変ありがたく思います。
本当にありがとうございます。