Rafael de Castro Rafael de Castro - 1 year ago 80
Android Question

SVG Text don'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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download