Menu
First - a short description of a problem. I write a JavaScript function to put some text label's in SVG canvas. Here it 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 to my project points. So, I call function:
set_label (10,50,'Qitos')
this will display Ktitos label - no problem.
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 :(
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
926
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text> , like any other SVG graphics element. If text is included in SVG not inside of a <text> element, it is not rendered.
6.1. 1 The editable attributeThe text and flowDiv elements have an editable attribute which specifies whether the contents of the elements can be edited in place.
Unicode covers all the characters for all the writing systems of the world, modern and ancient. It also includes technical symbols, punctuations, and many other characters used in writing text.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.
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:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
