SVG 文本不会在移动浏览器上更新

Question

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 1

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.