SVG text element with Unicode characters

后端未结

关注

 2  1809

First - a short description of a problem. I write a JavaScript function to put some text label\'s in SVG canvas. Here it is:

相关标签:

2条回答

情深已故

2021-01-11 11:16

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.

Here's a live example on my website showing that you can use these characters:

In the title of the page.
Directly in your text.
Inside JavaScript strings.

Note that I've saved this file with a UTF-8 encoding and notice that the top of the file has:

<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>

0 讨论(0)

抹茶落季

2021-01-11 11:28
Replace
```
set_label (10,50,'Qam&#218;raj')
```
with
```
set_lavel(10, 50, "Qam\u00DAraj");
```
"\u00DA" is four hex digits for Codepoint 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.html and type something like
```
var hex = "Α".charCodeAt(0).toString(16);
[, "\\x0", "\\x", "\\u0", "\\u"][hex.length] + hex;
```
which for "Α" produces
```
\u0391
```
0 讨论(0)
发布评论:

提交评论
- 加载中...