0

Recently, i've decided to go ahead and implement svg icons in my future designs. Purchased a great book, read this forum and learned how to do just that.

So far, all works ok except when creating popup/modal windows on the fly. I've tried to put a close icon (X) on the right top corner using an svg icon with no success.

Here's how i insert the SVG sprite into HTML

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="description" content="">
</head>
<body><?php 
    // SVG sprite
    echo file_get_contents(SVG_SPRITE); ?>
</div>
</body>
</html>

As you can see, i've added my svg sprite file

Here's how i add icons in HTML

<span class="modal-close">
    <svg class="icon small">
        <use xlink:href="/common/img/svg/sprite.svg?version=1.0#icon-close"></use>
    </svg>
</span>

The close icon is added successfully.

Now, trying to do the same thing when creating a modal windows on the fly is where i get in trouble

Here's my jquery

function create_modal()
{
    // create the modal
    var modal = $("<div></div>")
        .attr({
            "class": "modal"
        })
        .appendTo(document.body);

    // add the close button to the modal
    var btn = $("<span></span>")
        .attr({
            "class": "modal-close"
        })
        .appendTo(modal);

    // add the svg icon to the button
    var close = $("<svg></svg>")
        .attr({
            "class": "icon small"
        })
        .html("<use xlink:href='/common/img/svg/sprite.svg?version=1.0#icon-close'></use>")
        .appendTo(btn);

    return modal;
}

The modal is created successfully and I can see that the svg lines of code are there. What i don't see is the 'shadow-dom/shadow-root' of the svg icon.

What's wrong? How do i insert an svg when dealing with jquery? Is this the best approach? Is there a better approach to achieve my goal?

Marco
  • 2,687
  • 7
  • 45
  • 61
  • Wow! I've Just spent 15 minutes to formulate a question just to get hit with a 'duplicate' message. Before formulating my question, i did notice that exact 'duplicate' question. I wasn't able to get answers that's why i've decided to create a question with specifics. Very annoying! Nevermind – Marco Dec 04 '17 at 15:22
  • 1
    Specifically don’t use jquery to manipulate SVG they don’t play well together – Robert Longson Dec 04 '17 at 15:40
  • @RobertLongson yeah, i've ended up adding an image tag with an svg type ()... the old fashioned way. – Marco Dec 04 '17 at 17:48

0 Answers0