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");
}