CODEWITHSUNDEEP
htmlimagesvg
Geoff
Geoff

Reputation: 309

SVG graphics image manipulation

I have created an SVG element on my page. Into that I am programatically appending an tag. I have set the properties as recommended in the MDN page but I still have nothing showing up.

Here is the code:

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

And these are the results I am getting on the page:

<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>

So my question is where am I going wrong on this? I have never worked with SVG before so it's going to be a long experience. I am transporting to SVG from canvas as I need to be able to click on the inserted images.

Thank you.

Upvotes: 0

Views: 79

Answers (3)

Moglash
Moglash

Reputation: 301

I think jQuery and SVGs don't go so well together. Some things like changing classes and setting attributs dont't work on all elements.

See the post by kbwood.au: https://forum.jquery.com/topic/change-an-attribute-of-an-svg-shape-using-jquery

You could use vanilla javascript or look for a plugin which fixes the behaviour.

For example:

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

https://svgjs.dev/docs/2.7/

Upvotes: -1

Geoff
Geoff

Reputation: 309

I switched from SVG to canvas, and enabled the click on canvas by creating a second hidden canvas of identical dimensions and posted an object in the same location with a custom color. From there I could detect which object was clicked by comparing the color at the click coordinates. This project is now functioning perfectly.

Upvotes: 0

enxaneta
enxaneta

Reputation: 33044

In order to create a SVG element you need to use createElementNS. Also to set some SVG attributes like xlink:href you need to use setAttributeNS

Also, in SVG the transform looks different. I've used transform="rotate(90,420,577)" where 90 is the rotation in degs, 420 is the x for the center of rotation and 577 is the y for the center of rotation. The x and y are optionals and defaults to 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>

Upvotes: 2

Related Questions