带有 Unicode 字符的 SVG 文本元素答案

【问题标题】：SVG text element with Unicode characters带有 Unicode 字符的 SVG 文本元素
【发布时间】：2011-04-29 10:40:04
【问题描述】：

首先 - 对问题的简短描述。我编写了一个 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&#218;raj')

甚至更糟：

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

这必须显示 Θαρσανδαλα 标题全部由特殊字符组成 - 出现问题 - utf-8 符号看起来就像我写的一样 - 带有代码:(

经过对其他类似问题的一些研究，我发现如果我将 UTF-8 代码转换为 ESC 序列，例如 \U00B0 - 这必须解决这个问题，但是...... - 我不知道该怎么做 - 如果特殊字符在字符串中间怎么办 - 比如第二个例子

【问题讨论】：

我将其重新标记为 unicode 而不是 UTF-8，因为它与 UTF-8 无关。没有 UTF-8 符号这样的东西。 Unicode 定义了整数和符号之间的映射。 UTF-8 定义了整数和字节序列之间的映射。请参阅differencebetween.net/technology/… 以获得更详尽的说明。
Thsnk 的 Mike Samuel :) 你完全正确。

标签： javascript unicode svg

【解决方案1】：

真的很简单：只需将您想要的实际 Unicode 字符放入文档中，将文档另存为 UTF-8，并指定文档使用 UTF-8 字符集。

这里的a live example on my website 表明您可以使用这些字符：

在页面标题中。
直接在您的文本中。
在 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

【讨论】：

我在这个网站上找到了一个可能的解决方案：people.w3.org/rishida/tools/conversion 这是一个很棒的 Java 脚本转换器，可以在所有编码变体之间进行转换。这背后的 Java Script 引擎正是我解决问题所需要的。只是想看看我是否可以在我的项目中使用它 - 我不知道，我必须联系作者。