Menu
So I'm generating a svg and in svg there are <image> tags however whenever I append the <image> tag, it gets replaced with <img>
http://jsfiddle.net/d4s4p3az/
$('body').prepend('<image></image><br>');
$('body').append('img tags: '+$('body').children('img').length+'<br>');
$('body').append('image tags: '+$('body').children('image').length);
What's up with that.
Is this a jQuery thing? I've tried it in chrome and safari with the same results.
Edit:
Ended up with this function to append svg code to svg where the 1st argument is a jQuery object of the svg and the 2nd argument is the svg code to append.
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();
}
815
There is no image element in HTML, neither in in HTML5 nor HTML4. I expect browsers are just handling a common misspelling.
image is an SVG element, so you can't put it directly in body, it has to be within an SVG context. E.g.: 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);
...which gives us:
img tags: 0 image tags: 1
67
In your case when you do:
$('body').prepend('<image></image>');
jQuery will try to convert the string you try to append to a dom element before appending it, but image is not an official tag (http://www.w3.org/TR/html5/) so your browser will create an tag because it thought this is what you want
To force the browser to create the tag you want you should tell jQuery that what you want is an custom tag using this code:
var $image = $('<image>');
$('body').prepend($image);
this is ok for browser that let you create custom html elements like chrome and firefox, but this wont work in IE, have a look at this updated fiddle (will tell you "image tags 1" in chrome but still "image tags 0" in IE):
http://jsfiddle.net/d4s4p3az/1/
So the solution is to create a w3c conform tag using the svg image namespace:
<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>
Here is the fiddle:
http://jsfiddle.net/d4s4p3az/11/
A good article about manipulating SVG images using javascript can be found here: http://www.sitepoint.com/surviving-the-zombie-apocalypse-manipulating-svg-with-javascript/
Maybe in your case what would be usefull is to use a javascript library like svg.js: http://www.svgjs.com/
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
