带有Unicode字符的SVG文本元素

首先 - 对问题的简短描述。我写了一个JavaScript函数将一些文本标签放在SVG画布中。那就是：带有Unicode字符的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;')

这必须显示Θ α ρ σ α ν δ α λ α标题形成所有从特殊字符 - 一个问题accrue-utf-8符号出现像我写它 - 与代码:(

经过一些研究在这里其他类似的问题，我发现，如果我转换UTF-8代码ESC序列，如\ U00B0 - 这必须解决这个问题，但是...... - 我无法弄清楚它是如何做到这一点， - 如何做，如果特殊字符是在字符串中 - 就像第二个例子

来源

2011-04-29 xentia

我重新标记为unicode而不是UTF-8，因为它与UTF-8无关。没有像UTF-8符号那样的东西。 Unicode定义了整数和符号之间的映射。 UTF-8定义了整数和字节序列之间的映射。有关更详尽的解释，请参阅http://www.differencebetween.net/technology/difference-between-unicode-and-utf-8/。 – 2011-04-29 14:25:40

Thsnk的麦克塞缪尔:)你是绝对正确的。 – xentia 2011-04-29 19:52:01

这真的很简单：只需将您想要的实际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>

来源

2011-04-29 16:22:41 Phrogz

是的，这是很好的选择！我可以在我的项目中使用你的方法吗？先谢谢你。 – xentia 2011-04-29 22:28:52

@xentia当然你可以！ :) – Phrogz 2011-04-29 22:34:30

更换

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

与

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

“\ u00DA”是代码点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

来源

2011-04-29 14:17:53

我在这个网站上发现了一个可能的解决方案： http://people.w3.org/rishida/tools/conversion/ 这是一个很棒的java脚本转换器，可以编译所有的变体。这背后的Java脚本引擎正是我需要解决的问题。只是为了看看我是否可以在我的项目中使用它 - 我不知道，我必须联系作者。 – xentia 2011-04-29 22:01:05

带有Unicode字符的SVG文本元素

回答

相关问题