SVG графическая обработка изображений

Question

Я создал элемент SVG на своей странице. В это я программно добавляю тег. Я установил свойства в соответствии с рекомендациями на странице MDN, но ничего не отображается.

Вот код:

function makeDesk(desk) {
    var url = "./images/Desks/desk" + desk.deskType + ".png"
    var img = document.createElement("image");
    img.id = "desk_" + desk.id;


    $(img).addClass("deskImg");

    $(img).attr("transform", 'rotate(' + desk.rotation + 'deg)');
    $(img).attr("href", url);
    $(img).attr("y", desk.y + "px");
    $(img).attr("x", desk.x + "px");
    $(img).attr("height", desk.height + 'px');
    $(img).attr("width", desk.width + 'px');
    //    img.draggable = 'true';
    $("#desk_svg")[0].appendChild(img);


} //makeDesk

И вот результаты, которые я получаю на странице:

<svg id="desk_svg" width="1275px" height="986px">
<image id="desk_2" class="deskImg" transform="rotate(90deg)" href="./images/Desks/desk1.png" y="552px" x="395px" height="30px" width="50px"></image>
</svg>

Итак, мой вопрос: где я ошибаюсь? Я никогда раньше не работал с SVG, так что это будет долгий опыт. Я перевожу в SVG с холста, так как мне нужно нажимать на вставленные изображения.

Спасибо.

Answer 1

Чтобы создать элемент SVG, вам нужно использовать createElementNS . Также для установки некоторых атрибутов SVG, таких как xlink:href, необходимо использовать setAttributeNS

Кроме того, в SVG преобразование выглядит иначе. Я использовал transform="rotate(90,420,577)", где 90 - это поворот в градусах, 420 - это x для центра вращения, а 577 - это y для центра вращения. Значения x и y являются необязательными и по умолчанию равны 0.

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink"
function makeDesk(desk) {
    var url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png"
    var img = document.createElementNS(SVG_NS,"image");
    img.id = "desk_" + desk.id;


    img.classList.add("deskImg");
    let rotX = desk.x + desk.width/2;
    let rotY = desk.y + desk.height/2;
    img.setAttributeNS(null,"transform", 'rotate(' + desk.rotation + ','+rotX+','+rotY+')');
    img.setAttributeNS(SVG_XLINK, 'xlink:href', url);
    img.setAttribute("y", desk.y + "px");
    img.setAttribute("x", desk.x + "px");
    img.setAttribute("height", desk.height + 'px');
    img.setAttribute("width", desk.width + 'px');
    //    img.draggable = 'true';
    $("#desk_svg")[0].appendChild(img);


} //makeDesk

let desk = {id:5,rotation:45,y:100,x:100,width:100,height:100}
makeDesk(desk)

svg{border:1px solid; width:100vh}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="desk_svg" viewBox="0 0 1275 986">
 
<image id="desk_2" class="deskImg" transform="rotate(90,420,577)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png" y="552" x="395" height="50" width="50"></image>
</svg>

Answer 2

Я переключился с SVG на холст и включил щелчок по холсту, создав второй скрытый холст с одинаковыми размерами, и разместил объект в том же месте с настраиваемым цветом. Оттуда я мог определить, какой объект был нажат, сравнивая цвет по координатам щелчка. Этот проект сейчас функционирует отлично.

Answer 3

Я думаю, что jQuery и SVG не очень хорошо сочетаются друг с другом. Некоторые вещи, такие как изменение классов и установка атрибутов, не работают на всех элементах.

Смотрите сообщение от kbwood.au: https://forum.jquery.com/topic/change-an-attribute-of-an-svg-shape-using-jquery

Вы можете использовать ванильный JavaScript или искать плагин, который исправляет поведение.

Например:

http://keith -wood.name / svg.html

https://svgjs.com/docs/2.7/