I am trying to change text of an svg item inside an img tag dynamically with jquery. I keep grabbing the wrong node, because all the boards say to change textContent, but it never alters the text. Here is my HTML:
<head>
<script type="text/javascript">
$(window).resize(function() {
$('.ball').height($(window).height()+"px" );
$('.ball').width($(window).width()/6+"px");
});
$(function() {
$( ".ball" ).each(function( index ) {
var textNode = $(this);
textNode = textNode.find(".changeText");
textNode = textNode.children().first();
console.log(textNode);
textNode.textContent = "5";
});
});
$(window).trigger('resize');
</script>
</head>
<body>
<div id="svgMain">
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
</div>
</body>
And then here is the svg within the img tag I am trying to load dynamically:
<svg xmlns="" viewBox="0 0 100 100">
<g>
<circle cx="50%" cy="50%" r="50%"/>
<text class="changeText" text-anchor="middle" x="50%" y="60%" font-family="Verdana" font-size="35" fill="blue" ><tspan>150</tspan> </text>
</g>
</svg>
I am trying to change text of an svg item inside an img tag dynamically with jquery. I keep grabbing the wrong node, because all the boards say to change textContent, but it never alters the text. Here is my HTML:
<head>
<script type="text/javascript">
$(window).resize(function() {
$('.ball').height($(window).height()+"px" );
$('.ball').width($(window).width()/6+"px");
});
$(function() {
$( ".ball" ).each(function( index ) {
var textNode = $(this);
textNode = textNode.find(".changeText");
textNode = textNode.children().first();
console.log(textNode);
textNode.textContent = "5";
});
});
$(window).trigger('resize');
</script>
</head>
<body>
<div id="svgMain">
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
<img class="ball" src="ball.svg"/>
</div>
</body>
And then here is the svg within the img tag I am trying to load dynamically:
<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 100 100">
<g>
<circle cx="50%" cy="50%" r="50%"/>
<text class="changeText" text-anchor="middle" x="50%" y="60%" font-family="Verdana" font-size="35" fill="blue" ><tspan>150</tspan> </text>
</g>
</svg>
3 Answers
Reset to default 5You can't access anything inside an <img> tag from DOM. This is not part of the document, and nothing inside of it can access the document either.
For your problem, either use an <iframe> an <object> or an <embed> element to access it (plnkr),
either use and modify dataURIs (harder, slower and.. well don't do it actually).
Your textNode is a jQuery object. Instead of first(), take [0] to extract the DOM object from it - DOM nodes have .textContent, jQuery objects don't.
Alternately, use .text setter on the jQuery object. Both of these approaches work.
var textNode = $('svg');
textNode = textNode.find(".changeText");
textNode = textNode.children()[0];
textNode.textContent = "5";
var textNode = $('svg');
textNode = textNode.find(".changeText");
textNode = textNode.children();
textNode.text("7");<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="100" xmlns="http://www.w3/2000/svg" viewBox="0 0 100 100">
<g>
<circle cx="50%" cy="50%" r="50%" />
<text class="changeText" text-anchor="middle" x="50%" y="60%" font-family="Verdana" font-size="35" fill="blue">
<tspan>150</tspan>
</text>
</g>
</svg>If you want to access loaded document then you need to use <object data="ball.svg"> instead of image. And its HTMLObjectElement.contentDocument reference to get access to its content.
Something like this:
$( "object.ball" ).each(function( index ) {
var textNode = $(this.contentDocument);
textNode = textNode.find(".changeText");
textNode = textNode.children().first();
console.log(textNode);
textNode.textContent = "5";
});