CODEWITHSUNDEEP
javascriptjquerysvg
tcoulson
tcoulson

Reputation: 624

Change SVG text from inside an img tag

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.org/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>

Upvotes: 2

Views: 2791

Answers (3)

c-smile
c-smile

Reputation: 27460

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";
            });

Upvotes: 1

Kaiido
Kaiido

Reputation: 136698

You 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).

Upvotes: 5

Amadan
Amadan

Reputation: 198314

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="100" xmlns="http://www.w3.org/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>

Upvotes: 1

Related Questions