Drag and drop Magnet.js + svg смена цвета

Есть такая тестовая страница
http://simvl.ru/light/test/construct_test.html
Картинка, что на ней в самом начале svg. При нажатии на кнопку добавить элемент появляется новая ( уже png ). Отрабатывается скрипт и теперь можно их перетаскивать.
Все картинки, которые добавляются - обычные png. С ними никаких проблем нет.
Но первая svg - она не перетаскивается, чего бы я не делал.
Все что я смог придумать, это засунуть ее в див, но при этом я должен нажимать на сам див для перетаскивания, а не на его содержимое.
Сама svg выглядит так для дальнейшей возможной перекраски оной.

<object class="magnet" width="200"
                height="300"
                type="image/svg+xml"
                data="/Users/Votanko/Desktop/bootstrap_new/images/tiles/a4-vertical.svg">
        </object>  

Либо сама библиотека не может работать с svg, либо я что-то не понимаю.
Добавил стиль style="pointer-events: none" Все заработало.
Получил следующую проблему. Не могу перекрасить. svgElement массив определяется, но setAttribute не отрабатывает. Пробовал кучу вариаций (цвет, толщина линий) в консоли - толку нет.

var object2 = document.getElementsByClassName('123');
    var svgDocument = object2[0].contentDocument; //получаем svg элемент внутри object
    var svgElement = svgDocument.getElementsByClassName("st2"); //получаем любой элемент внутри svg
    
    for (i = 0; i < svgElement.length; i++) {
        svgElement[i].setAttribute("fill", "green");
    }

Ответы (0 шт):