动态制作svg介绍

http://blog.itpub.net/post/860/39133



近日从来邮中,发觉网友对动态制作svg很感兴趣,但却难以入手,现介绍一下(使用jsp)。
首先制作svg:

 

drawCircle.jsp:
-------------------------------------------------
<?xml version="1.0"?>

<%@ page contentType="text/xml" %>
<svg>
<circle cx="<%=request.getParameter("x")%>" cy="<%=request.getParameter("y")%>" r="<%=request.getParameter("r")%>" />
</svg>
-------------------------------------------------



这是画一个圆,其中圆中心,圆半径由参数定。各位可以测试这个程序,在浏览器地址栏打入:

http://127.0.0.1:8080/testsvg/drawCircle.jsp?x=40&y=40&r=30

应该可以看到:
-----------------------------------------------------
<?xml version="1.0"?>
<svg>
<circle cx="40" cy="40" r="30" />
</svg>
-----------------------------------------------------

如果看到这个结果,测试就成功了。接下来,怎样显示呢?因为目前的浏览器并不直接支持svg,
所以前面即使将"<%@ page contentType="text/xml" %>"换成"<%@ page contentType="text/xml+svg" %>"
或"<%@ page contentType="image/xml+svg" %>之类也是徒劳的。解决之道是激发plug-in作用,所以要
添加一个辅助文件,html或jsp皆可:

test.html:
-------------------------------------------------
<html>
<body>
<embed type="image/svg+xml" src="drawCircle.jsp?x=40&y=40&r=30" width="100" height="100" />
</body>
</html>
-------------------------------------------------
现在,在浏览器地址栏打入:

http://127.0.0.1:8080/testsvg/test.html

就能看到你所需的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值