Question

最近，我决定继续在未来的设计中实施svg图标。购买了一本好书，阅读了这个论坛，并学会了如何做到这一点。

到目前为止，除了在运行中创建弹出窗口/模态窗口外，一切正常。我试图使用svg图标在右上角放置一个关闭图标（X）但没有成功。

以下是我如何将SVG精灵插入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>

如您所见，我添加了我的svg精灵文件

以下是我在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>

成功添加关闭图标。

现在，在动态创建模态窗口时尝试做同样的事情是我遇到麻烦的地方

这是我的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;
}

模态创建成功，我可以看到svg代码行在那里。我没看到的是svg图标的'shadow-dom / shadow-root'。

怎么了？在处理jquery时如何插入svg？这是最好的方法吗？有没有更好的方法来实现我的目标？

如何使用jquery添加svg图标<use xlink：href =“”>

0 个答案: