Текстовый элемент SVG с символами Unicode

Сначала - краткое описание проблемы. Я пишу функцию JavaScript, чтобы поместить некоторую текстовую метку в холст SVG. Вот он:

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

Я должен использовать греческий шрифт из-за моих проектных точек. Итак, я вызываю функцию:

set_label (10,50,'Qitos')

отобразится метка Ktitos - нет проблем.

Но - когда я пытаюсь вызвать вот так:

set_label (10,50,'QamÚraj')

или даже хуже:

set_label (10,50,'Θαρσανδαλα')

это должно отображать заголовок Θαρσανδαλα, сформированный из специальных символов - проблема accrue - символ utf-8 появляется, как я пишу его - с кодом: (

После некоторых исследований здесь, в другом подобном вопросе, я обнаружил, что если я конвертирую код UTF-8 в последовательность ESC, например \U00B0 - это должно решить эту проблему, но... - Я не могу понять, как это сделать и - как это сделать, если специальный символ находится в середине строки - например, второй пример

Ответы

Ответ 1

Это очень просто: просто поместите фактические символы Юникода в документ, сохраните документ как UTF-8 и укажите, что документ использует набор символов UTF-8.

Здесь живой пример на моем сайте, показывающий, что вы можете использовать эти символы:

  • В заголовке страницы.
  • Непосредственно в вашем тексте.
  • Внутри строк JavaScript.

Обратите внимание, что я сохранил этот файл с кодировкой UTF-8 и заметил, что в верхней части файла есть:

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

В случае, если мой сайт не работает, вот содержание примера:

<!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>

Ответ 2

Заменить

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

с

set_lavel(10, 50, "Qam\u00DAraj");

"\ u00DA" - это четыре шестнадцатеричных цифры для Codepoint 218.

Аналогично, ваш другой ярлык будет

set_label (10,50,'\u0398\u03b1\u03c1\u03c3\u03b1\u03bd\u03b4\u03b1\u03bb\u03b1')

Если вы хотите найти гекс для греческого символа, вы можете перейти к http://www.squarefree.com/shell/shell.html и ввести что-то вроде

var hex = "Α".charCodeAt(0).toString(16);
[, "\\x0", "\\x", "\\u0", "\\u"][hex.length] + hex;

который для "Α" производит

\u0391