Question

150

SVG text element with Unicode characters

rated 0 times [ 152] [ 2] / answers: 1 / hits: 21817 / 13 Years ago, fri, april 29, 2011, 12:00:00

First - a short description of a problem. I write a JavaScript function to put some text label's in SVG canvas. Here it is:

function set_label(x,y,title)

{

 var newTitle = document.createElementNS(svgNS,text);

 newTitle.setAttributeNS(null,x,x);

 newTitle.setAttributeNS(null,y,y);

 newTitle.setAttributeNS(null,font-size,17px);

 newTitle.setAttributeNS(null,font-family,WinGreek);      

 var textNode = document.createTextNode(title);

 newTitle.appendChild(textNode);

 document.getElementById(viewport).appendChild(newTitle);   

}

I must use Greek font due to my project points. So, I call function:

set_label (10,50,'Qitos')

this will display Ktitos label - no problem.

But - when i try to call like this:

set_label (10,50,'Qam&#218;raj')

or even worse:

set_label (10,50,'&#920;&#945;&#961;&#963;&#945;&#957;&#948;&#945;&#955;&#945;')

this must display Θαρσανδαλα title formed all from special characters - a problem accrue - utf-8 symbol appear like i write it - with code :(

After some research here in other similar question's, i find that if I convert UTF-8 code to ESC sequence, like U00B0 - this must solve that problem, but...
- I cant figure it how to do this and
- how to do that if special character is in middle of string - like second example

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michaelashelbieh

Add To Favorites

Follow

Total Points: 303

Total Questions: 139

Total Answers: 97

Location: Suriname

Member since Sun, Oct 17, 2021

3 Years ago

answered 13 Years ago trayvon · Accepted Answer

It's really easy: just put the actual Unicode characters you want into your document, save the document as UTF-8, and specify that the document is using the UTF-8 character set.

Here's a live example on my website showing that you can use these characters:

In the title of the page.

Directly in your text.

Inside JavaScript strings.

Note that I've saved this file with a UTF-8 encoding and notice that the top of the file has:

<meta http-equiv=content-type content=application/xhtml+xml; charset=utf-8 />

On the off chance that my site is down, here's the content of the example:

<!DOCTYPE HTML> 

<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en><head> 

  <meta http-equiv=content-type

        content=application/xhtml+xml; charset=utf-8/>

  <title>Θαρσανδαλα</title> 

  <style type=text/css media=screen> 

    body { background:#eee; margin:0 }

    svg { display:block; border:1px solid #ccc; margin:2em auto;

          width:300px; height:200px; background:#fff }

    svg text { text-anchor:middle }

  </style> 

</head><body>



  <svg xmlns=http://www.w3.org/2000/svg version=1.1 baseProfile=full

       viewBox=-150 -100 300 200>

    <text>Inline: Θαρσανδαλα</text>

  </svg> 

  <script type=text/javascript><![CDATA[

    var svg  = document.getElementsByTagName('svg')[0];     

    createOn(svg,'text',{y:20,font-size:17px},Generated: Θαρσανδαλα);



    function createOn(root,name,attrs,text){

      var doc=root.ownerDocument, svg=root;

      while (svg.tagName!='svg') svg=svg.parentNode;

      var svgNS = svg.getAttribute('xmlns');

      var el = doc.createElementNS(svgNS,name);

      for (var attr in attrs){

        if (attrs.hasOwnProperty(attr)){

          var parts = attr.split(':');

          if (parts[1]) el.setAttributeNS(

            svg.getAttribute('xmlns:'+parts[0]), parts[1], attrs[attr]

          );

          else el.setAttributeNS(null,attr,attrs[attr]);

        }

      }

      if (text) el.appendChild(document.createTextNode(text));

      return root.appendChild(el);

    }          

  ]]></script> 

</body></html>