Rafael de Castro Rafael de Castro - 3 months ago 17
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">
<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"/>
<textPath class="svgText" xlink:href="#MyPath">

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

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



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.


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.