在IE9-11中使用jQuery更新SVG文本 [英] Updating SVG text using jQuery in IE9-11
本文介绍了在IE9-11中使用jQuery更新SVG文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用jQuery更新SVG路径上的文本.它在Firefox和Chrome中运行良好，但在IE9和IE11中(尚未在10上进行测试，但可能是相同的)，文本未更新.有任何想法/解决方法吗?到目前为止，这是我的代码:
I'm trying to update the text on a SVG path using jQuery. It works fine in Firefox and Chrome, but in IE9 and IE11 (haven't tested on 10, but it's probably the same) the text is not updated. Any ideas/workarounds? This is my code so far:
<!DOCTYPE html>
<html>
<head>
<style>
svg { background:url(_skins/cf/pics/ribbon.png); }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div style="padding:20px; border:1px solid red; width:500px; height:400px;">
<svg id="paglicaText" width="193" height="294" viewBox="0 0 193 294" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="ribbonLeft" d="M 23 261 C 32 182, 44 98, 83 42"/>
</defs>
<!--<use xlink:href="#ribbonLeft" fill="none" stroke="red"/>-->
<text font-family="Trebuchet MS" font-size="14" text-anchor="middle"><textPath xlink:href="#ribbonLeft" startOffset="50%" id="ribbonLeftText">Text text text</textPath></text>
</svg>
<script>
$('#ribbonLeftText').html('bla bla bla');
</script>
</div>
</body>
</html>
推荐答案
我知道了:
使用textContent属性而不是更新innerHTML是正确的，因此该行:
It's correct to use the textContent property instead of updating innerHTML, so the line:
$('#ribbonLeftText').html('bla bla bla');
成为:
$('#ribbonLeftText').prop('textContent','bla bla bla');
它适用于所有浏览器.
这篇关于在IE9-11中使用jQuery更新SVG文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
