Question

所以我生成一个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();
}

Answer 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 tags: 0
image tags: 1

Answer 2

当你这样做时：

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

jQuery会在添加之前尝试将你尝试追加的字符串转换为dom元素，但是image不是官方标签（http://www.w3.org/TR/html5/）所以你的浏览器会创建一个标签，因为它认为这就是你的意思想

要强制浏览器创建您想要的标记，您应该使用以下代码告诉jQuery您想要的是自定义标记：

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

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

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

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

因此，解决方案是使用svg image命名空间创建符合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/

Answer 3

我认为通过创建jQuery选择器，您可以这样做：

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

jQuery append用img替换图像

3 个答案: