javascript 带有 Unicode 字符的 SVG 文本元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5830991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG text element with Unicode characters
提问by xentia
First - a short description of a problem. I write a JavaScript function to put some text label's in SVG canvas. Here it is:
首先 - 对问题的简短描述。我编写了一个 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);
}
I must use Greek font due to my project points. So, I call function:
由于我的项目点，我必须使用希腊字体。所以，我调用函数：
set_label (10,50,'Qitos')
this will display Ktitos label - no problem.
这将显示 Ktitos 标签 - 没问题。
But - when i try to call like this:
但是 - 当我尝试这样打电话时：
set_label (10,50,'QamÚraj')
or even worse:
甚至更糟：
set_label (10,50,'Θαρσανδαλα')
this must display Θαρσανδαλα title formed all from special characters - a problem accrue - utf-8 symbol appear like i write it - with code :(
这必须显示 Θαρσανδαλα 标题全部由特殊字符组成 - 出现问题 - utf-8 符号看起来像我写的 - 带有代码:(
After some research here in other similar question's, i find that if I convert UTF-8 code to ESC sequence, like \U00B0 - this must solve that problem, but... - I cant figure it how to do this and - how to do that if special character is in middle of string - like second example
在其他类似问题中进行了一些研究后，我发现如果我将 UTF-8 代码转换为 ESC 序列，例如 \U00B0 - 这必须解决该问题，但是...... - 我无法弄清楚如何做到这一点以及 - 如何如果特殊字符在字符串中间，则这样做 - 就像第二个例子
采纳答案by Phrogz
It's really easy: just put the actual Unicode characters you want into your document, save the document as UTF-8, and specify that the document is using the UTF-8 character set.
这真的很简单：只需将所需的实际 Unicode 字符放入文档中，将文档另存为 UTF-8，并指定文档使用 UTF-8 字符集。
Here's a live example on my websiteshowing that you can use these characters:
- In the title of the page.
- Directly in your text.
- Inside JavaScript strings.
- 在页面的标题中。
- 直接在你的文本中。
- 在 JavaScript 字符串中。
Note that I've saved this file with a UTF-8 encoding and notice that the top of the file has:
请注意，我已使用 UTF-8 编码保存了此文件，并注意文件顶部有：
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
On the off chance that my site is down, here's the content of the example:
万一我的网站关闭了，下面是示例的内容：
<!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>
回答by Mike Samuel
Replace
代替
set_label (10,50,'QamÚraj')
with
和
set_lavel(10, 50, "Qam\u00DAraj");
"\u00DA" is four hex digits for Codepoint 218.
“\u00DA”是代码点 218 的四个十六进制数字。
Similarly, your other label would be
同样，你的另一个标签是
set_label (10,50,'\u0398\u03b1\u03c1\u03c3\u03b1\u03bd\u03b4\u03b1\u03bb\u03b1')
If you want to find the hex for a Greek character, you can go to http://www.squarefree.com/shell/shell.htmland type something like
如果你想找到希腊字符的十六进制，你可以去http://www.squarefree.com/shell/shell.html并输入类似的东西
var hex = "Α".charCodeAt(0).toString(16);
[, "\x0", "\x", "\u0", "\u"][hex.length] + hex;
which for "Α"produces
其中"Α"产生
\u0391
