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

时间:2016-10-12 19:34:05

标签: javascript android jquery svg ionic-framework

我正在为我的Android应用程序使用Ionic框架。

在我的索引上,我在路径上有一个SVG文本,该路径将在按钮单击时使用新文本进行更新。 在离子服务器上它可以正常运行,但是当我上传到模拟器时,文本根本就不会更新。

这是我的代码:

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

};

请忽略这样一个事实,即我没有使用Angular&#34;好东西&#34;,我是其新的方式&#34;并且无法使其正常工作。 Jquery是让它发挥作用的唯一方法。

SVG文本在Android浏览器上没有更新。

1 个答案:

答案 0 :(得分:1)

你想把它写成

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

这比尝试使用.html()函数更便携。 [0]将jQuery对象转换为原始DOM对象。