SVGへ動的に画像を追加し、ドラッグ&ドロップで画像を移動させる

現在、SVGの勉強をしており、その中でsvgファイルへ動的に画像を追加し、
その画像をドラッグ&ドロップで動かせる様にしたいと考えています。

現在のソースとしては以下の通りです。

html

html
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <meta name="description" content="">
9    <meta name="author" content="">
10    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
11    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
12    
13    <script src="/js/svg.min.js"></script>
14    <script src="/js/svg.draggable.min.js"></script>
15      </head>
16
17  <body>  
18
19<object id="test" type="image/svg+xml" data="test.svg"></object>
20<button name="addBtn">追加</button>
21  </body>
22</html>
23

svg
1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1128.04 1272.27"><g class="cls-2"><g id="base"><image width="800" height="600"  xlink:href="test.png"/></g></g></svg>

javascript
1$(function() {
2    
3    $('[name="addBtn"]').on('click', function(){
4        let svg_doc = document.getElementById('test_obj').contentDocument;
5        let src = 'test2.png';
6        
7        var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
8        image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src);
9        image.setAttributeNS(null, 'id',  'test');
10        image.setAttributeNS(null, 'width',  64);  
11        image.setAttributeNS(null, 'height', 64);
12        svg_doc.appendChild(image);
13
14        $(image).ready(function() {
15            $(image).draggable();
16        });
17    });
18    
19});