jQuery的追加不适用于SVG元素？
假设这样：
<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>
我为什么看不到任何东西？
问题答案：
当您将标记字符串传递到时$，会使用（或其他适用于特殊情况的容器）容器innerHTML上的浏览器属性将标记字符串解析为HTML
。无法解析SVG或其他非HTML内容，即使可以，也无法分辨出该内容应该在SVG命名空间中。<div>``<tr>``innerHTML``<circle>
innerHTML在SVGElement上不可用-
它仅是HTMLElement的属性。当前没有innerSVG属性或其他方法（*）将内容解析为SVGElement。因此，您应该使用DOM样式的方法。jQuery不能让您轻松访问创建SVG元素所需的命名空间方法。确实jQuery并非完全设计用于SVG，许多操作可能会失败。
HTML5承诺将来会在<svg>没有xmlns纯HTML（text/html）文档的情况下使用。但这只是一个解析器hack（**），SVG内容仍将是SVG命名空间中的SVGElements，而不是HTMLElements，因此innerHTML即使它们
看起来 像HTML文档的一部分，也将无法使用。
但是，对于当今的浏览器，您必须使用 X
HTML（正确用作application/xhtml+xml；保存为.xhtml文件扩展名以进行本地测试）才能使SVG正常工作。（无论如何，这都是有意义的；
SVG是一个基于XML的适当标准。）这意味着您必须对<脚本块中的符号进行转义（或将其包含在CDATA部分中），并包括XHTML xmlns声明。例：
<!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在几年前解决了这些问题。
-
问题内容： 我在尚不在页面中但可能异步加载到页面中的 DOM* 元素上编写了 jQuery 事件处理程序。我观察到的是，这些事件处理程序似乎不认识到 DOM 中添加了一些新元素，并且它们需要在触发时对其进行操作。 *** 我的观察正确吗？如何实现此功能？ 问题答案： 如果希望事件处理程序处理动态添加的内容，则需要使用 当然，这将导致观看您页面上任何位置的所有点击。为了提高效率，请查看是否可以构造页
-
我试图捕获并存储svg元素中出现的一些文本，例如 我有一个我正在使用的方法，它适用于其他元素，但Selenium WebElement类方法getText不会为上述svg元素返回任何文本。 下面是上述示例的xpath 我可以使用findElement（By.xpath（myXpath）），但是当我调用. getText（）时，它不会返回任何值，也不会抛出任何错误。 我有没有做错什么，或者可能有其他
-
问题内容： 据我了解，CSS过滤器应该可以在Chrome中的任何地方使用，但是我无法使它们适用于SVG元素。 在 所有 大多数浏览器中 都 可以正常工作： 但是，这在Chrome中不起作用： 这是一个例子： …这是一个小提琴：https : //jsfiddle.net/LtffLagn/2/ 问题答案： 所有归功于@Robert Longson，他给出了答案： CSS过滤器无法应用于Chrome
-
问题内容： 下面的代码有效。如果有更好的方法，请告诉我。如果我使用通过ajax加载test.html的主页中test.html中存在的脚本内容。该脚本不起作用。 Test.html： 我们必须根据需要通过ajax加载脚本以及动态加载的内容，但是我感到不利的是，每次我们发送ajax请求脚本时都会始终加载内容。但是我只找到了这种解决方案。如果有人知道更好的解决方案，请回复。 例如，如果以这种方式更改代
-
问题内容： 我在div页上： 并在jQuery中： 这为我产生了： 我想在表中收到此信息： 我在做： 但这为我产生了： 为什么？我怎样才能正确地做到这一点？ 问题答案： 这行： 附加到不是新的。 有几种方法： 但是，通过上述方法，添加样式和动态地进行处理变得不那么容易管理。 但是，如何做到这一点，却几乎可以实现您的期望： 希望这会有所帮助。
-
问题内容： 我正在尝试学习Javascript。在这里，我对以下代码感到困惑。 当我放入函数时，它出了问题。例如， 但是，，是工作。为什么不工作？请帮我。提前谢谢 问题答案： 一个或两个变量是字符串而不是数字。这使do字符串串联在一起。 其他算术运算符将对字符串进行转换。 将字符串转换为数字的快速方法是使用一元运算符。 …或使用您的变量：