jQuery append 用 img 替换图像答案

【问题标题】：jQuery append replaces image with imgjQuery append 用 img 替换图像
【发布时间】：2014-10-09 21:55:12
【问题描述】：

所以我正在生成一个 svg，并且在 svg 中有 <image> 标签，但是每当我附加 <image> 标签时，它就会被 <img> 替换

$('body').prepend('<image></image><br>');

$('body').append('img tags: '+$('body').children('img').length+'<br>');
$('body').append('image tags: '+$('body').children('image').length);

这是怎么回事。

这是一个 jQuery 的东西吗？我已经在 chrome 和 safari 中尝试过，结果相同。

编辑：

最后用这个函数将 svg 代码附加到 svg，其中第一个参数是 svg 的 jQuery 对象，第二个参数是要附加的 svg 代码。

function appendToSVG(svg,text){
    text = svg.html()+text;
    attributes = svg[0].attributes;

    var attrs = '';
    for (var i=0; i <= attributes.length-1; i++){
       attrs += attributes[i].name+'="'+attributes[i].value+'" ';       
    }
    svg.after('<svg '+attrs+'>'+text+'</svg>');
    svg.remove();
}

【问题讨论】：

看起来浏览器会这样做。尝试使用原始 Javascript 做同样的事情：div.innerHTML = "<image></image>"
看起来<image> 只允许在<svg> 内使用。

标签： jquery image svg

【解决方案1】：

HTML 中没有 image 元素，in HTML5 和 HTML4 中都没有。我希望浏览器只是处理一个常见的拼写错误。

image 是一个SVG element，所以你不能直接把它放在body 中，它必须在一个SVG 上下文中。例如：Updated Fiddle

$('body').prepend('<svg><image></image></svg><br>');

$('body').append('img tags: '+$('body').find('img').length+'<br>');
$('body').append('image tags: '+$('body').find('image').length);

...这给了我们：

img 标签：0
图片标签：1

【讨论】：

将它插入到 svg 中时会发生相同的行为，它会“破坏”我的代码。这是我使用但不起作用的部分。 .children('svg').prepend('<clipPath id="'+id+'_"><rect rx="'+roundness+'" ry="'+roundness+'" width="'+width+'" height="'+height+'"/></clipPath><g clip-path="url(#'+id+')">'+$('<image width="'+width+'" height="'+height+'" xlink:href="'+url+'"></image>')+'</g>');
我怀疑如果您在调用prepend 时进入（未缩小的）jQuery 源代码，最终您会发现它首先实例化了这些元素（在 HTML 上下文中），然后 然后 i> 将它们添加到 svg 元素之前。因此，当 jQuery 创建元素时，浏览器认为它处理的是 HTML，而不是 SVG。
@MatthewAbrman：很高兴有帮助。我刚刚进入prepend 的事情，果然，它在将它们附加到svg 元素之前在HTML 上下文中创建字符串中的元素。
我不擅长 javascript，有没有办法可以用纯 javascript 附加到 svg 元素？使用类似 $('.my-svg')[0].appendToSvg('text-to-append');
您还可以使用上面链接中显示的 parseSVG() 函数附加该标记。这是另一种方法，以防您需要附加它。

【解决方案2】：

当你这样做时：

$('body').prepend('<image></image>');

jQuery 将尝试在附加之前将您尝试附加的字符串转换为 dom 元素，但图像不是官方标签 (http://www.w3.org/TR/html5/)，因此您的浏览器将创建一个标签，因为它认为这是您想要的

要强制浏览器创建你想要的标签，你应该告诉 jQuery 你想要的是一个自定义标签，使用这个代码：

var $image = $('<image>');

$('body').prepend($image);

这对于允许您创建自定义 html 元素（如 chrome 和 firefox）的浏览器来说是可以的，但这在 IE 中不起作用，看看这个更新的小提琴（会告诉你 chrome 中的“图像标签 1”，但仍然是“图像标签” 0" 在 IE 中）：

http://jsfiddle.net/d4s4p3az/1/

所以解决方案是使用 svg 图像命名空间创建一个 w3c 一致性标记：

<html>

<head>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
</head>

<body>

<script>
$(document).ready(function onDomLoad() {

    $('svg').append('<image>');
    $('svg').append($('<image>'));

    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    $('svg').append(svg);

    $('body').append('img tags: '+$('svg').children('img').length+'<br>');
    $('body').append('image tags: '+$('svg').children('image').length);

});
</script>

</body>

</html>

这是小提琴：

http://jsfiddle.net/d4s4p3az/11/

一篇关于使用 javascript 处理 SVG 图像的好文章可以在这里找到：http://www.sitepoint.com/surviving-the-zombie-apocalypse-manipulating-svg-with-javascript/

也许在您的情况下，使用 svg.js 之类的 javascript 库会很有用：http://www.svgjs.com/

【讨论】：

【解决方案3】：

我认为通过创建 jQuery 选择器可以做到这一点：

var image = $('<image></image>');
$('body').prepend(image);

【讨论】：

这确实有效，你知道我是否可以用更长的脚本来做到这一点？当我尝试为图像设置一些属性并添加它时，它只是做了[object Object]。