Question

SVG 显示不出中文

小弟现在正在学习SVG，做一个XML如下哦，将此文件放到记事本里面，然后将后缀由txt改为svg然后在浏览器中查看即可，但他不能显示中文。
<?xml version="1.0"?>
<svg width="1300" height="1300">
<desc>Developer Works Dynamic OnToLogy Example</desc><script type="text/javascript"><![CDATA[function changeDescriptionText(evt){ var targetButton = evt.getTarget(); targetButton.setAttribute("fill","url(#rainbowRad)"); }function resetText(){ var targetButton = evt.getTarget(); targetButton.setAttribute("fill","blue");}// ]]></script>
<defs>

<radialGradient id="rainbowRad">
<stop offset="0" style="stop-color: rgb(255,0,0);"/>
<stop offset="16.6%" style="stop-color: orange"/>
<stop offset="33.3%" style="stop-color: yellow;"/>
<stop offset="50%" style="stop-color: green;"/>
<stop offset="66.6%" style="stop-color : #00FFFF"/>
<stop offset="83.3%" style="stop-color: blue;"/>
<stop offset="100%" style="stop-color: indigo;"/></radialGradient><circle id="CirSec" r="0">
<animate attributeName="r" begin='1s' to="50" dur="1s" fill="freeze"/>
</circle>
</defs>
<line x1="500" y1="400" x2="500" y2="400" stroke-width="2" stroke="blue" >
<animate attributeName="x2" to="650" dur="1s" fill="freeze"/></line>
<g id="GLogy0" onmouseover="changeDescriptionText(evt)" onmouseout="resetText(evt)" style="fill:blue" > <a xlink:href="SVGSecInstance.jsp?Instance=Guizhong_Wanxiangjie">
<g><use xlink:href="#CirSec" x="700" y="400" /> </g> <text id="TextLogy0" x="675" y="400" visibility="hidden" fill="red" font-size="20" style="fill:red">Guizhong_Wanxiangjie
<animate attributeName="visibility" to="visible" begin="2s" dur="1s" fill="freeze"/></text></a></g>
<line x1="500" y1="400" x2="500" y2="400" stroke-width="2" stroke="blue" >
<animate attributeName="x2" to="546" dur="1s" fill="freeze"/>
<animate attributeName="y2" to="257" dur="1s" fill="freeze"/></line>

<g id="GLogy4" onmouseover="changeDescriptionText(evt)" onmouseout="resetText(evt)" style="fill:blue"> <a xlink:href="SVGSecInstance.jsp?Instance=山东万向节">
<g><use xlink:href="#CirSec" x="561" y="590" /> </g> <text id="TextLogy4" x="536" y="590" visibility="hidden" fill="red" font-size="20" style="fill:red">山东万向节
<animate attributeName="visibility" to="visible" begin="2s" dur="1s" fill="freeze"/></text></a></g>
<g id="GLogyCenter" onmouseover="changeDescriptionText(evt)" onmouseout="resetText(evt)" style="fill:blue"> <a xlink:href="SVGSecInstance.jsp?Instance=万向节">
<circle cx="500" cy="400" r="50" fill="blue"></circle><text x="475" y="400" id="ontology" fill="red" font-size="20" style="fill:red">万向节</text></a></g>
</svg>
现在汉字显示不出来，只能手动的打开然后右击另存为utf-8类型，这样才能显示汉字。但是我希望电脑里的程序帮我做，而不是每次由用户去保存，大侠有知道该怎么做的吗？
谢谢哥们，我用了一下还是不行，提示不明的编码方式，搜了一下这是一个网址http://hi.baidu.com/asong/blog/item/5f5f0db37da1fea6d9335af1.html
里面有一段话：
说明：
在SVG中使用text元素定义文字。Text元素用x和y属性定义文字的位置。Text元素默认是左对齐，可以用text-anchor子属性指定文字的对齐方式，中对齐（text-anchor: middle），右对齐（text-anchor: end）
（按照XML的规则，显示中文应该是<?xml version="1.0" encoding="GB2312"?>，可在SVG中则通不过。谁知道的话请告诉我一声，谢谢。）
文字颜色的定义：可以在text元素的style属性中设置fill:color
---------------------------------------------------------------------------
跟我遇到的是相同的问题。

Answer 1

年轻人。你用的函数是 File SVGOutputFile 吧。
我看你的SVG图像是动态生成的。我举一个例子你试一下就明白了
先看你的做的例子

import java.lang.Math;
import java.io.File;
import java.io.FileWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class generateontology {

public static void main(String[] args) {
List list=new ArrayList();
list.add("数学");
list.add("中文");
list.add("语文");
String path="F:\\";
renderSVGGradientOnToLogy("abc",list,path);

}
public static void renderSVGGradientOnToLogy(String username,List list, String path) {

//此处为中间圆心的硬编码坐标，尚可修改，
int CirCenterX=500;
int CirCenterY=400;
int r=50;//圆的半径
int length=100;//射线的长度
int LineEndX=0;
int LineEndY=0;
int CirSecEndX=0;
int CirSecEndY=0;
String NewDirectPage="SVGSecInstance.jsp";

int ListAcount=list.size();

// This is where we find out what the largest value contained in each of the array is,
// its a simple loop that goes through each value passed, and determines the highest

try{
// Get the SVG file ready for the drawing of the perfomance graph
File SVGOutputFile = new File(path,"SVGOnToLogy.svg");
// File SVGOutputFile = new File("SVGOnToLogyTest1.svg");

FileWriter SVGout = new FileWriter(SVGOutputFile);

// Get the SVG graph ready
SVGout.write("<?xml version=\"1.0\"?>");
SVGout.write("\n<svg width=\"1300\" height=\"1300\">");
SVGout.write("\n<desc>Developer Works Dynamic OnToLogy Example</desc>");
//2010-8-8尹福青添加特效
SVGout.write("<script type=\"text/javascript\"><![CDATA[function changeDescriptionText(evt){ var targetButton = evt.getTarget(); targetButton.setAttribute(\"fill\",\"url(#rainbowRad)\"); }function resetText(){ var targetButton = evt.getTarget(); targetButton.setAttribute(\"fill\",\"blue\");}// ]]></script>");
SVGout.write("\n<defs>\n");
SVGout.write("\n<radialGradient id=\"rainbowRad\">");
SVGout.write("\n <stop offset=\"0\" style=\"stop-color: rgb(255,0,0);\"/>");
SVGout.write("\n <stop offset=\"16.6%\" style=\"stop-color: orange\"/>");
SVGout.write("\n <stop offset=\"33.3%\" style=\"stop-color: yellow;\"/>");
SVGout.write("\n <stop offset=\"50%\" style=\"stop-color: green;\"/>");
SVGout.write("\n <stop offset=\"66.6%\" style=\"stop-color : #00FFFF\"/>");
SVGout.write("\n <stop offset=\"83.3%\" style=\"stop-color: blue;\"/>");
SVGout.write("\n <stop offset=\"100%\" style=\"stop-color: indigo;\"/></radialGradient>");
//圆的提取可以在下面的<g>中重用，从第一秒开始放大
SVGout.write("<circle id=\"CirSec\" r=\"0\">");
SVGout.write("\n<animate attributeName=\"r\" begin=\'1s\' to=\"50\" dur=\"1s\" fill=\"freeze\"/>");
SVGout.write("\n</circle>\n</defs>");

// This generates a linear and radial gradient using a random colour
//在此处需计算一下根据数组元素的个数总共需要生成几个圆和几条射线。圆和射线个数相同
//1、当没有数值时
if(ListAcount==0)
{

SVGout.write("<text x=\""+(CirCenterX-25)+"\" y=\""+(CirCenterY+5)+"\" id=\"ontology\" fill=\"red\" font-size=\"30\">没有此记录</text></a>");

}
else{

//开始画布：先画中间圆之外的线和圆，在画中间的一个中间圆，这样线条不会挡住中间的文本。

for(int i=1;i<=ListAcount;i++)
{
if(i==1)//当为一时将x,y坐标固定。
{
SVGout.write("\n <line x1=\""+CirCenterX+"\" y1=\""+CirCenterY+"\" x2=\""+CirCenterX+"\" y2=\""+CirCenterY+"\" stroke-width=\"2\" stroke=\"blue\" >");
SVGout.write("\n <animate attributeName=\"x2\" to=\""+(CirCenterX+r+length)+"\" dur=\"1s\" fill=\"freeze\"/>");
SVGout.write("</line>");
//尹福青2010-8-8号修改，在进入新的页面后将Instance的值动态传入。
//尹福青2010-8-26号修改，由于再输入汉字时SVG图像无法显示，原因为g的ID属性用了数组里的内容导致显示不出来，所以将ID改为字母+数字；
// SVGout.write("\n<g> <a xlink:href=\"http://www.baidu.com\">");
SVGout.write("\n<g id=\"GLogy"+(i-1)+"\" onmouseover=\"changeDescriptionText(evt)\" onmouseout=\"resetText(evt)\" style=\"fill:blue\" > <a xlink:href=\""+NewDirectPage+"?Instance="+list.get(i-1)+"\">");

SVGout.write("\n<g><use xlink:href=\"#CirSec\" x=\""+(CirCenterX+2*r+length)+"\" y=\""+CirCenterY+"\" /> </g> ");
SVGout.write("<text id=\"TextLogy"+(i-1)+"\" x=\""+(CirCenterX+2*r+length-25)+"\" y=\""+(CirCenterY)+"\" visibility=\"hidden\" fill=\"red\" font-size=\"20\" style=\"fill:red\">"+list.get(i-1)+"");
SVGout.write("\n <animate attributeName=\"visibility\" to=\"visible\" begin=\"2s\" dur=\"1s\" fill=\"freeze\"/>");
SVGout.write("</text></a></g>");
}
else//当不为一时
{

LineEndX=(int)((Math.cos(2*Math.PI*(i-1)/ListAcount))*(r+length)+500);
LineEndY=(int)(400-Math.sin(2*Math.PI*(i-1)/ListAcount)*(r+length));
CirSecEndX=(int)((Math.cos(2*Math.PI*(i-1)/ListAcount))*(2*r+length)+500);
CirSecEndY=(int)(400-Math.sin(2*Math.PI*(i-1)/ListAcount)*(2*r+length));

SVGout.write("\n <line x1=\""+CirCenterX+"\" y1=\""+CirCenterY+"\" x2=\""+CirCenterX+"\" y2=\""+CirCenterY+"\" stroke-width=\"2\" stroke=\"blue\" >");
SVGout.write("\n <animate attributeName=\"x2\" to=\""+LineEndX+"\" dur=\"1s\" fill=\"freeze\"/>");
SVGout.write("\n <animate attributeName=\"y2\" to=\""+LineEndY+"\" dur=\"1s\" fill=\"freeze\"/>");

SVGout.write("</line>");

//圆生成并且附带了连接和数组中的字符
//尹福青2010-8-8号修改，在进入新的页面后将Instance的值动态传入。
// SVGout.write("\n<g> <a xlink:href=\"http://www.baidu.com\">");
SVGout.write("\n<g id=\"GLogy"+(i-1)+"\" onmouseover=\"changeDescriptionText(evt)\" onmouseout=\"resetText(evt)\" style=\"fill:blue\"> <a xlink:href=\""+NewDirectPage+"?Instance="+list.get(i-1)+"\">");
SVGout.write("\n<g><use xlink:href=\"#CirSec\" x=\""+CirSecEndX+"\" y=\""+CirSecEndY+"\" /> </g> ");
SVGout.write("<text id=\"TextLogy"+(i-1)+"\" x=\""+(CirSecEndX-25)+"\" y=\""+(CirSecEndY)+"\" visibility=\"hidden\" fill=\"red\" font-size=\"20\" style=\"fill:red\">"+list.get(i-1)+"");
SVGout.write("\n <animate attributeName=\"visibility\" to=\"visible\" begin=\"2s\" dur=\"1s\" fill=\"freeze\"/>");
SVGout.write("</text></a></g>");

}

}
//尹福青2010-8-8号修改，在进入新的页面后将Instance的值动态传入。
//SVGout.write("\n<g> <a xlink:href=\"http://www.baidu.com\">");
SVGout.write("\n<g id=\"GLogyCenter\" onmouseover=\"changeDescriptionText(evt)\" onmouseout=\"resetText(evt)\" style=\"fill:blue\"> <a xlink:href=\""+NewDirectPage+"?Instance="+username+"\">");

SVGout.write("\n <circle cx=\""+CirCenterX+"\" cy=\""+CirCenterY+"\" r=\""+r+"\" fill=\"blue\"></circle>");
SVGout.write("<text x=\""+(CirCenterX-25)+"\" y=\""+(CirCenterY)+"\" id=\"ontology\" fill=\"red\" font-size=\"20\" style=\"fill:red\">"+username+"</text></a></g>");

}

SVGout.write("\n</svg>");
SVGout.close();
}
catch (java.io.IOException e){
System.out.println("IO Exception error caught");
e.printStackTrace();
}
catch (Exception e)
{
System.out.println("Unknown error caught");
e.printStackTrace();
}

}
}

你将上面的代码放到java里面运行。后会在F盘下面出现一个文件svgontology.svg这是我们动态生成的。双击它。在浏览器中打开时发现它是无法正常显示的。然后右击用Editplus打开。选择另存为UTF-8格式，保存，在浏览器中重新查看时。显示正常。（当然前提是你要安装svg的插件）。现在我们有另一种方式。可以直接让他生成utf-8的类型。无需转换。看我的改的代码：
import java.io.FileOutputStream;
import java.io.OutputStreamWriter;
import java.util.ArrayList;
import java.util.List;

public class asdf {

/**
* @param args
*/
public static void main(String[] args) {
List list=new ArrayList();
list.add("数学");
list.add("中文");
list.add("语文");
String path="F:\\";
renderSVGGradientOnToLogy("abc",list);

}

public static void renderSVGGradientOnToLogy(String username,List list) {

//此处为中间圆心的硬编码坐标，尚可修改，
int CirCenterX=500;
int CirCenterY=400;
int r=50;//圆的半径
int length=100;//射线的长度
int LineEndX=0;
int LineEndY=0;
int CirSecEndX=0;
int CirSecEndY=0;
String NewDirectPage="SVGSecInstance.jsp";
int ListAcount=list.size();
String path="F:\\SVGOnToLogy.svg";

// This is where we find out what the largest value contained in each of the array is,
// its a simple loop that goes through each value passed, and determines the highest

try{
// Get the SVG file ready for the drawing of the perfomance graph

OutputStreamWriter out = new OutputStreamWriter(
new FileOutputStream(path),"UTF-8");

// Get the SVG graph ready
out.write("<?xml version=\"1.0\"?>");
out.write("\n<svg width=\"1300\" height=\"1300\">");
out.write("\n<desc>Developer Works Dynamic OnToLogy Example</desc>");
//2010-8-8尹福青添加特效
out.write("<script type=\"text/javascript\"><![CDATA[function changeDescriptionText(evt){ var targetButton = evt.getTarget(); targetButton.setAttribute(\"fill\",\"url(#rainbowRad)\"); }function resetText(){ var targetButton = evt.getTarget(); targetButton.setAttribute(\"fill\",\"blue\");}// ]]></script>");
out.write("\n<defs>\n");
out.write("\n<radialGradient id=\"rainbowRad\">");
out.write("\n <stop offset=\"0\" style=\"stop-color: rgb(255,0,0);\"/>");
out.write("\n <stop offset=\"16.6%\" style=\"stop-color: orange\"/>");
out.write("\n <stop offset=\"33.3%\" style=\"stop-color: yellow;\"/>");
out.write("\n <stop offset=\"50%\" style=\"stop-color: green;\"/>");
out.write("\n <stop offset=\"66.6%\" style=\"stop-color : #00FFFF\"/>");
out.write("\n <stop offset=\"83.3%\" style=\"stop-color: blue;\"/>");
out.write("\n <stop offset=\"100%\" style=\"stop-color: indigo;\"/></radialGradient>");
//圆的提取可以在下面的<g>中重用，从第一秒开始放大
out.write("<circle id=\"CirSec\" r=\"0\">");
out.write("\n<animate attributeName=\"r\" begin=\'1s\' to=\"50\" dur=\"1s\" fill=\"freeze\"/>");
out.write("\n</circle>\n</defs>");

// This generates a linear and radial gradient using a random colour
//在此处需计算一下根据数组元素的个数总共需要生成几个圆和几条射线。圆和射线个数相同
//1、当没有数值时
if(ListAcount==0)
{

out.write("<text x=\""+(CirCenterX-25)+"\" y=\""+(CirCenterY+5)+"\" id=\"ontology\" fill=\"red\" font-size=\"30\">没有此记录</text></a>");

}
else{

//开始画布：先画中间圆之外的线和圆，在画中间的一个中间圆，这样线条不会挡住中间的文本。

for(int i=1;i<=ListAcount;i++)
{
if(i==1)//当为一时将x,y坐标固定。
{
out.write("\n <line x1=\""+CirCenterX+"\" y1=\""+CirCenterY+"\" x2=\""+CirCenterX+"\" y2=\""+CirCenterY+"\" stroke-width=\"2\" stroke=\"blue\" >");
out.write("\n <animate attributeName=\"x2\" to=\""+(CirCenterX+r+length)+"\" dur=\"1s\" fill=\"freeze\"/>");
out.write("</line>");
//尹福青2010-8-8号修改，在进入新的页面后将Instance的值动态传入。
//尹福青2010-8-26号修改，由于再输入汉字时SVG图像无法显示，原因为g的ID属性用了数组里的内容导致显示不出来，所以将ID改为字母+数字；
// out.write("\n<g> <a xlink:href=\"http://www.baidu.com\">");
out.write("\n<g id=\"GLogy"+(i-1)+"\" onmouseover=\"changeDescriptionText(evt)\" onmouseout=\"resetText(evt)\" style=\"fill:blue\" > <a xlink:href=\""+NewDirectPage+"?Instance="+list.get(i-1)+"\">");

out.write("\n<g><use xlink:href=\"#CirSec\" x=\""+(CirCenterX+2*r+length)+"\" y=\""+CirCenterY+"\" /> </g> ");
out.write("<text id=\"TextLogy"+(i-1)+"\" x=\""+(CirCenterX+2*r+length-25)+"\" y=\""+(CirCenterY)+"\" visibility=\"hidden\" fill=\"red\" font-size=\"20\" style=\"fill:red\">"+list.get(i-1)+"");
out.write("\n <animate attributeName=\"visibility\" to=\"visible\" begin=\"2s\" dur=\"1s\" fill=\"freeze\"/>");
out.write("</text></a></g>");
}
else//当不为一时
{

LineEndX=(int)((Math.cos(2*Math.PI*(i-1)/ListAcount))*(r+length)+500);
LineEndY=(int)(400-Math.sin(2*Math.PI*(i-1)/ListAcount)*(r+length));
CirSecEndX=(int)((Math.cos(2*Math.PI*(i-1)/ListAcount))*(2*r+length)+500);
CirSecEndY=(int)(400-Math.sin(2*Math.PI*(i-1)/ListAcount)*(2*r+length));

out.write("\n <line x1=\""+CirCenterX+"\" y1=\""+CirCenterY+"\" x2=\""+CirCenterX+"\" y2=\""+CirCenterY+"\" stroke-width=\"2\" stroke=\"blue\" >");
out.write("\n <animate attributeName=\"x2\" to=\""+LineEndX+"\" dur=\"1s\" fill=\"freeze\"/>");
out.write("\n <animate attributeName=\"y2\" to=\""+LineEndY+"\" dur=\"1s\" fill=\"freeze\"/>");

out.write("</line>");

//圆生成并且附带了连接和数组中的字符
//尹福青2010-8-8号修改，在进入新的页面后将Instance的值动态传入。
// out.write("\n<g> <a xlink:href=\"http://www.baidu.com\">");
out.write("\n<g id=\"GLogy"+(i-1)+"\" onmouseover=\"changeDescriptionText(evt)\" onmouseout=\"resetText(evt)\" style=\"fill:blue\"> <a xlink:href=\""+NewDirectPage+"?Instance="+list.get(i-1)+"\">");
out.write("\n<g><use xlink:href=\"#CirSec\" x=\""+CirSecEndX+"\" y=\""+CirSecEndY+"\" /> </g> ");
out.write("<text id=\"TextLogy"+(i-1)+"\" x=\""+(CirSecEndX-25)+"\" y=\""+(CirSecEndY)+"\" visibility=\"hidden\" fill=\"red\" font-size=\"20\" style=\"fill:red\">"+list.get(i-1)+"");
out.write("\n <animate attributeName=\"visibility\" to=\"visible\" begin=\"2s\" dur=\"1s\" fill=\"freeze\"/>");
out.write("</text></a></g>");

}

}
//尹福青2010-8-8号修改，在进入新的页面后将Instance的值动态传入。
//out.write("\n<g> <a xlink:href=\"http://www.baidu.com\">");
out.write("\n<g id=\"GLogyCenter\" onmouseover=\"changeDescriptionText(evt)\" onmouseout=\"resetText(evt)\" style=\"fill:blue\"> <a xlink:href=\""+NewDirectPage+"?Instance="+username+"\">");

out.write("\n <circle cx=\""+CirCenterX+"\" cy=\""+CirCenterY+"\" r=\""+r+"\" fill=\"blue\"></circle>");
out.write("<text x=\""+(CirCenterX-25)+"\" y=\""+(CirCenterY)+"\" id=\"ontology\" fill=\"red\" font-size=\"20\" style=\"fill:red\">"+username+"</text></a></g>");

}

out.write("\n</svg>");
out.close();
}
catch (java.io.IOException e){
System.out.println("IO Exception error caught");
e.printStackTrace();
}
catch (Exception e)
{
System.out.println("Unknown error caught");
e.printStackTrace();
}

}

}
好了试一下吧！看看是不是不用保存直接就可以浏览中文了！！！

Answer 2

将前两行改为
<?xml version="1.0" encoding="GB2312"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1300" height="1300">

这样，在我这里是可以显示汉字的。
请在你那里测试。