path jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/raphael.js"></script> <script type="text/javascript" src="js/index004.js"></script> </head> <body> </body> </html>
path js:
$(function() { initRaphael(); }); function initRaphael(e) { // 这样会自动创建一个svg对象 var paper = Raphael(0,0,300,300); var d = 'M10,30L60,30L10,80L60,80'; var mark = paper.path(d); mark.attr({ "stroke":"#F00", "stroke-width":3 }); mark.attr("fill","#00c"); }
other jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/raphael.js"></script> <script type="text/javascript" src="js/index005.js"></script> </head> <body> <div id="container"></div> </body> </html>
other js:
$(function() { initRaphael(); }); function initRaphael(e) { // 这样会根据container这个ID找到该对象 var paper = Raphael('container',500,500); var dot = paper.circle(250,150,100); dot.attr({ fill:'red', stroke:'green', 'stroke-width':3 }); var d = paper.ellipse(100,100,50,20); var rec = paper.rect(100,10,50,20); // 图片会产生相应的缩放 var fluffy = paper.image('1.jpg',25,20,100,100); fluffy.attr('stroke','green'); fluffy.attr('stroke-width',3); var png = paper.image('a.png',200,200,80,65); }