first - short description of problem. write javascript function put text label's in svg canvas. here is:
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 project points. so, call function:
set_label (10,50,'qitos') this display ktitos label - no problem.
but - when try call this:
set_label (10,50,'qamÚraj') or worse:
set_label (10,50,'Θαρσανδαλα') this must display Θαρσανδαλα title formed special characters - problem accrue - utf-8 symbol appear write - code :(
after research here in other similar question's, find if convert utf-8 code esc sequence, \u00b0 - must solve problem, but... - cant figure how , - how if special character in middle of string - second example
it's easy: put actual unicode characters want document, save document utf-8, , specify document using utf-8 character set.
here's a live example on website showing can use these characters:
- in title of page.
- directly in text.
- inside javascript strings.
note i've saved file utf-8 encoding , notice top of file has:
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> on off chance site down, here's content of 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); (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> 
Comments
Post a Comment