基于@chris-dolphin的回答，但使用了helper函数:

// Creates svg element, returned as jQuery object
function $s(elem) {
  return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}

var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);

这是我今天对FF 57的工作:

function () {
    // JQuery, today, doesn't play well with adding SVG elements - tricks required
    $(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
    $(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
        .attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}

使:

我建议最好使用ajax并从另一个页面加载svg元素。

$('.container').load(href + ' .svg_element');

其中href是带有svg. xml的页面的位置。通过这种方式，您可以避免替换html内容时可能发生的任何紧张影响。另外，不要忘记在svg加载后打开它:

$('.svg_element').unwrap();

替代方案1:原生js insertAdjacentHTML()

如果你根本不考虑切换到原生JavaScript…… 您还可以使用本地javaScript方法insertAdjacentHTML()来获得同样方便的表示法。

  $("#svg")[0].insertAdjacentHTML(
    "beforeEnd",
    '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
  );

$("#svg")[0]使你的jQuery对象在原生JS中可选。

替代方案2:编写一个原生js DOMParser()帮助器

mdn web文档:DOMParser.parseFromString()

  function createSvgEl(markup) {
    markup = `<svg xmlns="http://www.w3.org/2000/svg">
  ${markup}</svg>`;
    const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml")
      .documentElement.children[0];
    return svgEl;
  }

jQuery的用法:

  $("#svgXML").append(
    createSvgEl(
      '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
    )
  );

Demo

// native js helper function createSvgEl(markup) { markup = `<svg xmlns="http://www.w3.org/2000/svg"> ${markup}</svg>`; const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml") .documentElement.children[0]; return svgEl; } $(document).ready(function() { // works - but will remove existing children $("#svg1").html( '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>' ); // works // $("#svg")[0] makes your jQueryObject selectable in native JS $("#svg")[0].insertAdjacentHTML( "beforeEnd", '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>' ); $("#svgXML").append( createSvgEl( '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>' ) ); // jquery still works! Vanilla doesn't harm! $("#svgXML circle:nth-of-type(2)").attr('fill', 'orange'); //insert after() $("#svgAfter circle").after( createSvgEl( '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>' ) ); //insert after native $("#svgAfterNative circle")[0].insertAdjacentHTML( "afterEnd", '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>' ); }); svg { border: 1px solid red; overflow: visible; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Append via native js insertAdjacentHTML()</p> <svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> <circle cx="10" cy="10" r="5" fill="green" /> </svg> <p>Append via DOMParser() helper</p> <svg id="svgXML" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> <circle cx="10" cy="10" r="5" fill="green" /> </svg> <p>Append via jquery html() - will strip existing child nodes</p> <svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> <circle cx="10" cy="10" r="5" fill="green" /> </svg> <p>Insert after existing element with jQuery after() using DOMParser() helper</p> <svg id="svgAfter" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> <circle cx="10" cy="10" r="5" fill="green" /> </svg> <p>Insert after existing element with native js insertAdjacentHTML()</p> <svg id="svgAfterNative" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> <circle cx="10" cy="10" r="5" fill="green" /> </svg>

jquery的after()或before()方法也将无法添加SVG DOM(取决于正确的名称空间)元素。

使用前面提到的变通方法也可以解决这个问题。

我可以看到圈在firefox，做2件事:

1)将文件从html重命名为xhtml

2)更改脚本为

<script type="text/javascript">
$(document).ready(function(){
    var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    obj.setAttributeNS(null, "cx", 100);
    obj.setAttributeNS(null, "cy", 50);
    obj.setAttributeNS(null, "r",  40);
    obj.setAttributeNS(null, "stroke", "black");
    obj.setAttributeNS(null, "stroke-width", 2);
    obj.setAttributeNS(null, "fill", "red");
    $("svg")[0].appendChild(obj);
});
</script>

我为此做了一个小函数。对于jQuery的追加方法，问题是需要为SVG指定命名空间，即“http://www.w3.org/2000/svg”更多

如果我准备它为appendmethod呢?在这种情况下，你只需要提供一些参数:

tagName:它可以是每一个SVG元素，如矩形，圆，文本，g等。

text:如果您正在使用类似text tagname的东西，则需要指定text

和SVG元素的其他已知属性。

因此，我要做的是定义一个名为createSvgElem()的函数，它在内部使用document.createElementNS()。

这里有一个例子:

$("svg").append(
   createSvgElem({tagName: "text", x: 10, y: 10, text: "ABC", style: "fill: red"})
)

这是函数:

   function createSvgElem(options){
        var settings = $.extend({
            }, options);

        if(!$.isEmptyObject(settings.tagName)){
            var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
            for (var k in settings)
                if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
                    el.setAttribute(k, settings[k]);

            if ("text" in settings)
                el.textContent = settings.text; //el.innerText; For IE
            return el;
        }
    }

你可以自己试试:

//Definition: function createSvgElem(options){ var settings = $.extend({ }, options); if(!$.isEmptyObject(settings.tagName)){ var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName); for (var k in settings) if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value el.setAttribute(k, settings[k]); if ("text" in settings) el.textContent = settings.text; //el.innerText; For IE return el; } } //Usage: $(function(){ $("#svg-elem").append( createSvgElem({tagName: "rect", width: 130, height: 500, style: "fill: #000000a3;"}) ) $("#svg-elem").append( createSvgElem({tagName: "text", x: 30, y: 30, text: "ABCD", style: "fill: red"}) ) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg id="svg-elem" width="200" height="200"> </svg>