jquery 的追加不适用于 svg 元素？

小编典典

jquery 的追加不适用于 svg 元素？

all

假设：

<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
 });
 </script>
</head>
<body>
 <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">
 </svg>
</body>

为什么我什么都看不到？

阅读 80

2022-06-21

共1个答案

小编典典

当您将标记字符串传递给时，它会使用浏览器在 a （或其他适合特殊情况的容器，如）上的属性$解析为 HTML 。无法解析 SVG 或其他非 HTML
内容，即使可以，它也无法分辨出它应该在 SVG 命名空间中。innerHTML``<div>``<tr>``innerHTML``<circle>

innerHTML在 SVGElement 上不可用——它只是 HTMLElement
的属性。目前也没有innerSVG属性或其他方式（*）将内容解析为 SVGElement。出于这个原因，您应该使用 DOM 样式的方法。jQuery
无法让您轻松访问创建 SVG 元素所需的命名空间方法。真的，jQuery 根本不是为与 SVG 一起使用而设计的，许多操作可能会失败。

HTML5 承诺将来让您在<svg>没有xmlns内部纯 HTML ( ) 文档的情况下使用。但这只是一个解析器 hack(**)，SVG
内容仍然是 SVG 命名空间中的 SVGElements，而不是 HTMLElements，因此即使它们 看起来 像 HTML
文档的一部分，text/html您也无法使用。innerHTML __

但是，对于当今的浏览器，您必须使用 X HTML（正确地用作application/xhtml+xml; 保存为 .xhtml
文件扩展名以进行本地测试）才能使 SVG 工作。（无论如何，这有点道理；SVG 是一个适当的基于 XML
的标准。）这意味着您必须转义<脚本块内的符号（或包含在 CDATA 部分中），并包含 XHTMLxmlns声明。例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
    <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
    <script type="text/javascript">
        function makeSVG(tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }

        var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
        document.getElementById('s').appendChild(circle);
        circle.onmousedown= function() {
            alert('hello');
        };
    </script>
</body></html>

*：嗯，有 DOM Level 3 LS 的parseWithContext，但是浏览器支持很差。编辑添加：但是，虽然您不能将标记注入到 SVGElement 中，但您可以使用将新的 SVGElement 注入到 HTMLElement 中innerHTML，然后将其传输到所需的目标。不过它可能会慢一些：

<script type="text/javascript"><![CDATA[
    function parseSVG(s) {
        var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
        div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
        var frag= document.createDocumentFragment();
        while (div.firstChild.firstChild)
            frag.appendChild(div.firstChild.firstChild);
        return frag;
    }

    document.getElementById('s').appendChild(parseSVG(
        '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
    ));
]]></script>

**：我讨厌 HTML5 的作者似乎害怕 XML，并决心将基于 XML 的功能硬塞进 HTML 的混乱中。XHTML 多年前就解决了这些问题。

2022-06-21