SVG 显示不出中文_IT百科

年轻人。你用的函数是 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=1i<=ListAcounti++)

{

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=1i<=ListAcounti++)

{

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

}

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

根据circle和text的相对位置和circle的坐标计算出text的坐标，这样text不就显示在circle上了，而且一定是先绘制circle在绘制text，SVG中后面绘制的要素会压盖前面绘制的要素。

我们把SVG交互设计想象成作画的过程，假设一个100*100像素的画布。

绘制一个圆形，只需要知道圆心坐标和半径。

circle 圆

cx圆心横坐标

cy 圆心纵坐标

r 半径

fill是填充色

stroke 描边

stroke-width 描边宽度

颜色可以有三种表达方式，例如红色怎么表示？

①颜色英文例如：fill="red"

②16进制例如：fill="#ff0000"

③RGB 例如：fill="rgb(255,0,0)"

绘出一个矩形，需要起始位置坐标（x和y），和宽度（width），高度（height）。

注意：当width="100%"的时候，画布是整个网页的宽度。

矩形的起点坐标，就是矩形的左上角的坐标。

注意：x 、y、width、height可以单独变化，也可以一起变化。

<animate attributeName="x" from="50" to="250" dur="3s" repeatcount="2" fill="remove">

动画元素<animate>...</animate>

attruibuteName 属性名

from 初始值

to 终值

dur 持续时间

repeatcount重复次数

①可以填入具体的数值，例如2，就表示动画重复2次

②可以填入“indefinite”,表示无限循环

fill=" "

①remove 动画结束后保持在起始位置

②freeze 动画结束后保持在终止位置

圆形动画，圆的半径可以变化

</animate>

values="507090" 圆的半径从50->70->90

格式

values="参数1参数2参数3......."

可以看出来可以定义动画的多个关键帧，而from 和to来只能定义参数的起始和结束。

keyTimes="00.21"

keytimes 在默认的状态下，第一个时间值为0，最后一个时间值为1。是values对应的时间分配比

意思就是，半径50->70动画分配 4x0.2=0.8s的时间，70->90，分配了4 x0.8=3.2s的时间。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11541131.html

SVG 显示不出中文

发表评论

评论列表（0条）