IE9以下的无需插件显示svg

https://github.com/wout/raphael-svg-import.git(简单的svg)
http://julying.com/lab/raphael-js/docs/（中文API）
www.readysetraphael.com(复杂的svg先转成raphael js)

<html>
<head>

<script type="text/javascript" src="raphael-min.js" charset="utf-8"></script>

</head>
<body>

<div id="rsr">(这时面的ID和下面 Raphael('rsr'）保持一至)</div>
<script type="text/javascript">

var rsr = Raphael('rsr', '2500', '1700');

var Untilted = rsr.set();
var rect_ap = rsr.rect(0, 0, 2500, 1800);
rect_ap.attr({x: '0',y: '0',fill: 'rgb(0,0,0)',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'rect_ap');
Untilted.attr({'visibility': 'visible','id': 'plane_0','name': 'Untilted'});
var group_a = rsr.set();
var text_aq = rsr.text(938.687, 464.016, '电压电流分量及负序不平衡度实时表');
text_aq.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_aq');
group_a.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_a'});
var group_b = rsr.set();
var text_ar = rsr.text(900.609, 592.008, '电压正序分量');
text_ar.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_ar');
group_b.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_b'});
var group_c = rsr.set();
var text_as = rsr.text(1476.17, 604.508, '57.3');
text_as.attr({fill: 'rgb(000,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_as');
group_c.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_c'});
var group_d = rsr.set();
var text_at = rsr.text(900.609, 692.588, '电压零序分量');
text_at.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_at');
group_d.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_d'});
var group_e = rsr.set();
var text_au = rsr.text(900.609, 790.169, '电压负序分量');
text_au.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_au');
group_e.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_e'});
var group_f = rsr.set();
var text_av = rsr.text(1476.17, 702.517, '10.1');
text_av.attr({fill: 'rgb(000,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_av');
group_f.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_f'});
var group_g = rsr.set();
var text_aw = rsr.text(900.609, 888.749, '电压负序不平衡度');
text_aw.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_aw');
group_g.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_g'});
var group_h = rsr.set();
var text_ax = rsr.text(900.609, 988.329, '电流正序分量');
text_ax.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_ax');
group_h.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_h'});
var group_i = rsr.set();
var text_ay = rsr.text(900.609, 1087.91, '电流零序分量');
text_ay.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_ay');
group_i.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_i'});
var group_j = rsr.set();
var text_az = rsr.text(900.609, 1189.49, '电流负序分量');
text_az.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_az');
group_j.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_j'});
var group_k = rsr.set();
var text_ba = rsr.text(900.609, 1294.07, '电流负序不平衡度');
text_ba.attr({fill: 'rgb(085,085,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_ba');
group_k.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_k'});
var group_l = rsr.set();
var text_bb = rsr.text(1476.17, 800.526, '10.3');
text_bb.attr({fill: 'rgb(000,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_bb');
group_l.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_l'});
var group_m = rsr.set();
var text_bc = rsr.text(1476.17, 898.535, '0.2');
text_bc.attr({fill: 'rgb(000,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_bc');
group_m.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_m'});
var group_n = rsr.set();
var text_bd = rsr.text(1476.17, 1094.55, '0.2');
text_bd.attr({fill: 'rgb(000,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_bd');
group_n.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_n'});
var group_o = rsr.set();
var text_be = rsr.text(1476.17, 1192.56, '0.1');
text_be.attr({fill: 'rgb(000,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_be');
group_o.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_o'});
var group_p = rsr.set();
var text_bf = rsr.text(1476.17, 1290.57, '0.1');
text_bf.attr({fill: 'rgb(000,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_bf');
group_p.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_p'});
var group_q = rsr.set();
group_q.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_q'});
var group_r = rsr.set();
group_r.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_r'});
var group_s = rsr.set();
group_s.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_s'});
var group_t = rsr.set();
group_t.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_t'});
var group_u = rsr.set();
group_u.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_u'});
var group_v = rsr.set();
group_v.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_v'});
var group_w = rsr.set();
group_w.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_w'});
var group_x = rsr.set();
group_x.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_x'});
var group_y = rsr.set();
group_y.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_y'});
var group_z = rsr.set();
group_z.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_z'});
var group_aa = rsr.set();
group_aa.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_aa'});
var group_ab = rsr.set();
group_ab.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ab'});
var group_ac = rsr.set();
group_ac.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ac'});
var group_ad = rsr.set();
group_ad.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ad'});
var group_ae = rsr.set();
group_ae.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ae'});
var group_af = rsr.set();
group_af.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_af'});
var group_ag = rsr.set();
group_ag.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ag'});
var group_ah = rsr.set();
group_ah.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ah'});
var group_ai = rsr.set();
var text_bg = rsr.text(1476.17, 996.544, '1.0');
text_bg.attr({fill: 'rgb(085,255,255)',"font-family": 'Roman',"font-weight": '50',"font-size": '48',visibility: 'visible',parent: 'plane_0','stroke-width': '0','stroke-opacity': '1'}).data('id', 'text_bg');
group_ai.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ai'});
var group_aj = rsr.set();
group_aj.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_aj'});
var group_ak = rsr.set();
group_ak.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ak'});
var group_al = rsr.set();
group_al.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_al'});
var group_am = rsr.set();
group_am.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_am'});
var group_an = rsr.set();
group_an.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_an'});
var group_ao = rsr.set();
group_ao.attr({'visibility': 'visible','parent': 'plane_0','name': 'group_ao'});

var rsrGroups = [plane_0,group_a,group_b,group_c,group_d,group_e,group_f,group_g,group_h,group_i,group_j,group_k,group_l,group_m,group_n,group_o,group_p,group_q,group_r,group_s,group_t,group_u,group_v,group_w,group_x,group_y,group_z,group_aa,group_ab,group_ac,group_ad,group_ae,group_af,group_ag,group_ah,group_ai,group_aj,group_ak,group_al,group_am,group_an,group_ao];

//var paper = Raphael(0, 0, 760, 600);

// Creates circle at x = 50, y = 40, with radius 10
//var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
//circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
//circle.attr("stroke", "#fff");
//var set = paper.set();
//var paper = Raphael(document.getElementById('paper'), document.innerWidth, document.innerHeight);
//paper.importSVG('<?xml version="1.0" encoding="UTF-8"?> <svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" stroke="black" text-rendering="auto" stroke-linecap="square" stroke-miterlimit="10" stroke-opacity="1" shape-rendering="auto" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto"><defs id="genericDefs"/> <g><g fill="yellow" stroke="yellow"> <rect x="400" width="1000" height="800" y="0" stroke="none"/></g> <g font-family="'Times New Roman'" font-size="28"> <text x="500" xml:space="preserve" y="200" stroke="none" >12345</text><text x="500" xml:space="preserve" y="400" stroke="none">123456</text><line y2="180" fill="none" x1="100" x2="600" y1="180"/> <line y2="210" fill="none" x1="100" x2="600" y1="210"/> <line y2="210" fill="none" x1="100" x2="100" y1="180"/> <line y2="210" fill="none" x1="600" x2="600" y1="180"/> <line y2="210" fill="none" x1="600" x2="600" y1="180"/> <line y2="210" fill="none" x1="100" x2="600" y1="180"/> <rect x="100" width="1" height="301" y="180" stroke="none"/> <rect x="101" width="199" height="1" y="180" stroke="none"/> <rect fill="rgb(3,3,3)" x="101" width="200" height="1" y="480" stroke="none"/> <rect fill="rgb(3,3,3)" x="300" width="1" height="300" y="180" stroke="none"/> <path fill="none" d="M300 330 A100 150 0 1 0 200 480"/> <ellipse rx="100" fill="none" ry="150" cx="700" cy="360"/> <rect fill="none" x="600" width="200" height="300" y="210"/> <rect x="600" y="180" fill="none" width="200" rx="0" ry="45" height="300" stroke="blue"/> <polygon fill="none" points=" 600 180 650 150 700 210" stroke="blue"/> </g></g></svg> ');
</script>
</body>
<html>

IE9以下的无需插件显示svg

猜你喜欢