Skip to content

Instantly share code, notes, and snippets.

@daohodac

daohodac/index.html

Last active August 29, 2015 14:08
Show Gist options
  • Save daohodac/6db306dcb5d66d913f5c to your computer and use it in GitHub Desktop.
Save daohodac/6db306dcb5d66d913f5c to your computer and use it in GitHub Desktop.
Download ZIP
intercalate an element <g> with jQuery
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var intercalateFails = function() {
var zoomParentId = "zoom_anim_parent_bbsmashed";
var gId = "#zoom_anim";
$(gId).parent().append($("<g id='"+zoomParentId+"'>"));
var that = $(gId).detach().appendTo("#"+zoomParentId);
};
var intercalateWorksFine = function() {
var zoomParentId = "zoom_anim_parent_bbsmashed";
var gId = "#zoom_anim";
var node = $(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
node.attr('id', zoomParentId);
$(gId).parent().append(node);
var that = $(gId).detach().appendTo("#"+zoomParentId);
};
</script>
<body>
<p>the explanation is given <a href="http://stackoverflow.com/questions/26615797/intercalate-a-g-tag-in-svg-thru-jquery">here</a></p>
<button onClick="intercalateFails()">intercalate g tag fail (reload the page)</button>
<button onClick="intercalateWorksFine()">intercalate g tag works fine (reload the page)</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 640 480" height="174" id="svg-fragment-1" version="1.1" viewBox="0 0 640 480" width="100%" x="0px" xml:space="preserve" y="0px">
<g id="zoom_anim" cursor="pointer">
<polygon fill="lime" id="R3_anim" points="274.5,134.5 274.5,69.5 83.5,69.5 83.5,219.5 192.5,219.5 192.5,134.5 " stroke="#000000" stroke-miterlimit="10"></polygon>
</g>
</svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment