帶有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文本元素

回答

相關問題