jquery的追加不与svg元素一起工作？ [英] jquery's append not working with svg element?
问题描述
假设：
< html>
< head>
< script type =text / javascriptsrc =jquery.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（svg）。append（'< circle cx =100cy =50r =40stroke =黑色stroke-width =2fill =red/>'）;
}）;
< / script>
< / head>
< body>
< svg xmlns：svg =http://www.w3.org/2000/svgxmlns =http://www.w3.org/2000/svgviewBox =0 0 200 100 width =200pxheight =100px>
< / svg>
< / body>
为什么我什么都看不到？
innerHTML 解析为HTML格式。 < tr> ）。 innerHTML 无法解析SVG或其他非HTML内容，即使它可能无法分辨< circle> 应该在SVG名称空间中。 innerHTML 在SVGElement上不可用 - 它仅是HTMLElement的一个属性。目前还没有 innerSVG 属性或其他方式（*）来将内容解析为SVGElement。出于这个原因，你应该使用DOM风格的方法。 jQuery不会让您轻松访问创建SVG元素所需的名称空间方法。实际上jQuery根本不适合与SVG一起使用，许多操作可能会失败。
HTML5承诺允许你使用< svg> 将来在纯HTML（ text / html ）文档中没有 xmlns 。但这只是解析器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 =sxmlns =http://www.w3.org/2000/svg/>
< script type =text / javascript>
函数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，但可以使用 innerHTML 将新的SVGElement注入HTMLElement，然后将其转移到所需的目标。它可能会慢一点：
< 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）;
返回碎片;
$ b document.getElementById（'s'）。appendChild（parseSVG（
'< circle cx =100cy =50r =40stroke =blackstroke-width =2fill =redonmousedown =alert（\'hello \'）;/>'
））;
]]>< / script>
**：我讨厌HTML5的作者似乎对XML感到害怕，并且决定对shoehorn基于XML的功能融入了HTML中。 XHTML在几年前解决了这些问题。
Assuming this:
<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>
Why don't I see anything?
When you pass a markup string into $, it's parsed as HTML using the browser's innerHTML property on a <div> (or other suitable container for special cases like <tr>). innerHTML can't parse SVG or other non-HTML content, and even if it could it wouldn't be able to tell that <circle> was supposed to be in the SVG namespace.
innerHTML is not available on SVGElement—it is a property of HTMLElement only. Neither is there currently an innerSVG property or other way(*) to parse content into an SVGElement. For this reason you should use DOM-style methods. jQuery doesn't give you easy access to the namespaced methods needed to create SVG elements. Really jQuery isn't designed for use with SVG at all and many operations may fail.
HTML5 promises to let you use <svg> without an xmlns inside a plain HTML (text/html) document in the future. But this is just a parser hack(**), the SVG content will still be SVGElements in the SVG namespace, and not HTMLElements, so you'll not be able to use innerHTML even though they look like part of an HTML document.
However, for today's browsers you must use XHTML (properly served as application/xhtml+xml; save with the .xhtml file extension for local testing) to get SVG to work at all. (It kind of makes sense to anyway; SVG is a properly XML-based standard.) This means you'd have to escape the < symbols inside your script block (or enclose in a CDATA section), and include the XHTML xmlns declaration. example:
<!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>
*: well, there's DOM Level 3 LS's parseWithContext, but browser support is very poor. Edit to add: however, whilst you can't inject markup into an SVGElement, you could inject a new SVGElement into an HTMLElement using innerHTML, then transfer it to the desired target. It'll likely be a bit slower though:
<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>
**: I hate the way the authors of HTML5 seem to be scared of XML and determined to shoehorn XML-based features into the crufty mess that is HTML. XHTML solved these problems years ago.
这篇关于jquery的追加不与svg元素一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
