Rafael de Castro Rafael de Castro - 1 month ago 11
Javascript Question

SVG Text doesn't update on mobile browser

I'm using the Ionic framework for my android app.

On my index I have a SVG Text along a path that will update with a new text on a button click.
On ionic server its OK and functional, but when I upload to the emulator the text simply doesn't update anymore.

Here is my code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg" width="240px" height="63px" viewBox="-36.745 72.133 245.331 23.568">
<defs>
<path id="MyPath" d="M-36.745,89.659c0,0,17.786,8.625,51.934,0.671c0,0,97.811-22.88,152.395-14.463c0,0,20.615,5.33,40.871,15"/>
</defs>
<text>
<textPath class="svgText" xlink:href="#MyPath">
SVG TEXT THAT NEED UPDATE
</textPath>
</text>
</svg>
==========

<button id="cardApply" ng-click="updateText()">Update</button>

==========
updateText = function($title){
var svgNewTitle = $title;

$('.svgText').html(svgNewTitle);

};


Please just ignore the fact that I'm not using the Angular "goodies", I'm new to its "ways" and couldn't make it work properly. Jquery was the only way to make it work.

The SVG text doesn't update on an android browser.

Answer

You want to write this as

$('.svgText')[0].textContent = svgNewTitle;

That's rather more portable than trying to use the .html() function. The [0] converts the jQuery object to a raw DOM object.