带有Unicode字符的SVG文本元素

xen*_*tia 13 javascript unicode svg

首先 - 对问题的简短描述.我编写了一个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);   
}
Run Code Online (Sandbox Code Playgroud)

由于我的项目积分,我必须使用希腊字体.所以,我称之为功能:

set_label (10,50,'Qitos') 
Run Code Online (Sandbox Code Playgroud)

这将显示Ktitos标签 - 没问题.

但是 - 当我尝试这样打电话时:

set_label (10,50,'QamÚraj')
Run Code Online (Sandbox Code Playgroud)

甚至更糟:

set_label (10,50,'Θαρσανδαλα')
Run Code Online (Sandbox Code Playgroud)

这必须显示Θαρσανδαλα标题形成全部来自特殊字符 - 问题累积 - utf-8符号出现像我写它 - 与代码:(

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

Phr*_*ogz 11

这很简单:只需将您想要的实际Unicode字符放入文档中,将文档保存为UTF-8,并指定文档使用UTF-8字符集.

这是我网站上一个实例,显示您可以使用这些字符:

  • 在页面标题中.
  • 直接在你的文字中.
  • 里面的JavaScript字符串.

请注意,我已使用UTF-8编码保存此文件,并注意该文件的顶部有:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
Run Code Online (Sandbox Code Playgroud)

关于我的网站关闭的机会,这是示例的内容:

<!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>
Run Code Online (Sandbox Code Playgroud)


Mik*_*uel 5

代替

\n\n
set_label (10,50,\'Qam&#218;raj\')\n
Run Code Online (Sandbox Code Playgroud)\n\n

\n\n
set_lavel(10, 50, "Qam\\u00DAraj");\n
Run Code Online (Sandbox Code Playgroud)\n\n

“\\u00DA”是代码点 218 的四个十六进制数字。

\n\n

同样,你的另一个标签是

\n\n
set_label (10,50,\'\\u0398\\u03b1\\u03c1\\u03c3\\u03b1\\u03bd\\u03b4\\u03b1\\u03bb\\u03b1\')\n
Run Code Online (Sandbox Code Playgroud)\n\n

如果您想查找希腊字符的十六进制,您可以访问http://www.squarefree.com/shell/shell.html并输入类似的内容

\n\n
var hex = "\xce\x91".charCodeAt(0).toString(16);\n[, "\\\\x0", "\\\\x", "\\\\u0", "\\\\u"][hex.length] + hex;\n
Run Code Online (Sandbox Code Playgroud)\n\n

"\xce\x91"产生

\n\n
\\u0391\n
Run Code Online (Sandbox Code Playgroud)\n