svg在设置了viewBox后,才会出现这种问题
现象1
<text>内部有有其他标签,比如<tspan>,通过操作 innerHTML
属性直接替换掉内部的tspan时实现改变,字体大小将失去css控制
解决
经测试,<text><tspan>内部只有文本情况操作innerHTML
是没有问题的,所以可以直接操作内部的只有文本的<tspan>或者<text>
测试浏览器为目前最新版的chrome(49.0.2623.110)
现象2
Android 4.42 中<text><tspan>没有innerHTML
属性,于是只能操作textContent
,但textContent
不管是什么浏览器,即使是当前最新的chrome(49.0.2623.110),依然会丢失字体大小。于是就有了这里:
万能的解放方案
通过textNode节点解决
贴上代码
sText[0].childNodes[0].nodeValue = num;
sText[1].childNodes[0].nodeValue = total;