通过 jquery 更改 svg 中的文本（文本是动态值 - 温度）答案

【问题标题】：changing text in svg by jquery (text is an dynamically value - temperature)通过 jquery 更改 svg 中的文本（文本是动态值 - 温度）
【发布时间】：2016-08-23 00:12:56
【问题描述】：

我想更改 svg 的这个文本部分：

<text id="VL_temp" xml:space="preserve" style="font-size:40px;font-style:normal;font-weight:normal;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans;font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr" x="432.24234" y="110" sodipodi:linespacing="100%">**--**</text>

我想显示来自 KNX 安装的温度我尝试了以下代码，但没有任何反应：

   <script>
<![CDATA[
var thisGA = '14/0/4';
var thisTransform = 'DPT:9.001';
visu = new CometVisu('/cgi-bin/');
visu.update = function ( json )
{
  var temp = Transform[thisTransform].decode( json[thisGA] );
  $('#VL_temp', svg.root()).text('temp');
}
$(window).unload(function() {
  visu.stop();
});
visu.user = 'demo_user';
visu.subscribe( [thisGA] );
]]>

以 $('#VL_temp' 开头的行有什么问题？其余的代码似乎没问题，因为这部分可以在另一个 svg 中使用 jquery (svn-link to the svg)

【问题讨论】：

标签： jquery jquery-svg

【解决方案1】：

SVG 中的<text> 标记应包含<tspan> 标记，文本应位于<tspan> 标记中，如下所示：

<text id="VL_temp" xml:space="preserve" style="" x="432.24234" y="110" sodipodi:linespacing="100%"><tspan>**--**</tspan></text>

代码也需要更新：

$('#VL_temp tspan', svg.root()).text('temp');

【讨论】：

【解决方案2】：

我可以通过选择这样的 id 来更改它：

$('#VL_temp').text("replaced");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <svg>
<text id="VL_temp" xml:space="preserve" style="font-size:40px;font-style:normal;font-weight:normal;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans;font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr" dy="1em" sodipodi:linespacing="100%">hello world</text>
</svg>

【讨论】：