changing text in svg by jquery (text is an dynamically value - temperature)

jensgulow picture jensgulow · May 8, 2013 · Viewed 8.7k times · Source

I'd like to change this text-part of an 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>

I'd like to display an temperature, which comes from an KNX-Installation I've tried with the following code, but nothing happens:

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

whats the problem with the line starting with $('#VL_temp'? The rest of the code seems to be ok, because this part works in another svg with jquery (svn-link to the svg)

Answer

hegemon picture hegemon · May 8, 2013

The <text> tag i SVG should contain a <tspan> tag and the text should by in the <tspan> tag, like this:

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

The code needs to be updated as well:

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