首先 - 对问题的简短描述。我编写了一个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,'Θαρσανδαλα')
这必须显示Θαρσανδαλα标题形成全部来自特殊字符 - 问题累积 - utf-8符号看起来像我写它 - 代码:(
经过对其他类似问题的一些研究,我发现如果我将UTF-8代码转换为ESC序列,比如\ U00B0 - 这必须解决这个问题,但...... - 我无法弄清楚如何做到这一点 - 如果特殊字符位于字符串中间,如何做到这一点 - 如第二个例子
答案 0 :(得分:11)
这很简单:只需将您想要的实际Unicode字符放入文档中,将文档保存为UTF-8,并指定文档使用UTF-8字符集。
这是a live example on my website,表明您可以使用这些字符:
请注意,我已使用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>
答案 1 :(得分:3)
替换
set_label (10,50,'QamÚ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