`

IE9以下的无需插件显示svg

raphaelsvg跨浏览器 
阅读更多
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="&apos;Dialog&apos;" 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="&apos;Times New Roman&apos;" 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>
分享到：
| batik
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    在线预览PDF(无需任何插件) 支持IE/Firefox/Coogle

    1. **PDF.js**：这是一个由Mozilla开发的开源库，它允许在Web浏览器中渲染PDF文档，而无需借助任何外部插件。PDF.js可以解析PDF文件的内容，并将其转换为HTML5 Canvas或者SVG元素显示，从而实现跨平台和跨浏览器的...

    ie9浏览器离线安装包

    IE9对HTML5标准提供了更好的支持，包括视频、音频、SVG矢量图、Canvas绘图等元素，使用户可以享受更多多媒体和交互式内容，而无需依赖第三方插件。 5. **Chakra JavaScript引擎** IE9搭载了新的Chakra JavaScript...

    高性能HTML和SVG元素拖拽js插件plain-draggable

    plain-draggable插件的核心目标是提供一个轻量级、高效且易于使用的解决方案，让开发者无需深入研究复杂的拖放API，即可快速实现元素的拖放功能。它支持HTML5的DOM元素以及SVG图形元素的拖放，这在创建数据可视化或...

    IE支持CSS3 HTML5插件

    5. **图形处理**：`&lt;canvas&gt;`元素提供了动态图形绘制的能力，而`&lt;svg&gt;`则用于矢量图形的显示。 **IE支持问题及解决方法** 由于IE浏览器，尤其是较旧的版本（如IE8及以下），对CSS3和HTML5的支持有限，因此需要借助...

    SVG图标变形效果

    jQuery的一个扩展插件SVG-Morpheus（可能就是压缩包中的内容）可能是用于实现SVG图标的变形效果。Morpheus可能提供了方便的方法来控制SVG形状之间的转换，包括但不限于路径数据的解析、形状的匹配和变形算法的实现。...

    SVGView浏览器图形显示插件

    SVGView浏览器图形显示插件是专门用来增强浏览器对SVG的支持，使得用户可以在不支持SVG的浏览器中查看这些矢量图形。 SVG的主要优势在于它提供了高度的细节控制，无论放大多少倍，图像质量都不会降低，因为它是基于...

    SVGView 插件

    1. **跨浏览器兼容性**：SVGView确保在老版IE浏览器上也可以正常显示SVG图形，提高了网站的可达性和用户体验。 2. **高质量图形**：SVG是矢量图，无论放大多少倍，图像质量都不会降低，适合用于地图、图表、图标和...

    在线浏览PDF文件、可兼容IE浏览器

    标题中的“在线浏览PDF文件、可兼容IE浏览器”意味着我们将探讨如何在网页环境中，特别是对Internet Explorer（IE）浏览器支持的情况下，实现PDF文件的在线预览。这在现代Web开发中是一个常见需求，因为PDF文档广泛...

    pdf在线预览插件

    PDF在线预览插件是一种网页应用技术，它允许用户在浏览器中直接查看PDF文档，而无需下载文件到本地。这种功能极大地提升了用户体验，特别是在处理大文件或者需要快速浏览的情况下。本篇文章将深入探讨如何利用...

    无插件在线预览pdf

    "无插件在线预览PDF"技术则解决了这个问题，它提供了无需下载任何额外软件或插件就能在线预览PDF文件的能力。 这项技术的核心在于利用Web浏览器的内置功能或者JavaScript库来解析和渲染PDF文件。例如，Google的PDF....

    让IE支持HTML5

    3. **多媒体支持**：原生支持音频（)和视频（)元素，无需Flash插件。 4. **Canvas画布**：提供JavaScript API用于在网页上绘制图形，实现动态和交互式的视觉效果。 5. **SVG矢量图**：支持嵌入和操作可缩放的矢量...

    js模糊幻影动画特效插件

    2. **兼容性**：支持大部分现代浏览器，包括Chrome、Firefox、Safari、Edge等，同时也兼容IE9及以上版本。 3. **多元素支持**：不仅限于HTML元素，还能够应用于SVG元素，提供了更丰富的动画场景。 4. **自适应**：...

    让IE6也识别CSS3-圆角效果应用border-radius

    2. **使用JavaScript库**：如jQuery的Corner插件，它可以根据指定的圆角值动态生成SVG或VML代码，从而实现圆角效果。引入jQuery库和Corner插件后，只需一行代码即可应用圆角： ```javascript $('.element').corner...

    HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述

    - 大多数现代浏览器（如Chrome和Firefox）原生支持SVG，旧版IE需要插件支持。 6. **SVG的应用场景** - 地图：因为SVG的文本可搜索性和缩放性，非常适合用于在线地图服务。 - 图标系统：矢量图的特性使得SVG图标...

    msjvm微软的java插件

    7. **替代技术**: 当前，为了在网页上实现类似Java applets的功能，开发者通常会使用HTML5的Canvas、SVG、WebGL等技术，它们无需额外的插件就能在现代浏览器中运行。 8. **兼容性和迁移**: 对于仍然依赖Java ...

    pdf_pdf.jsie_pdf.js_

    PDF.js 是一个开源的 JavaScript 库，由 Mozilla 维护，用于在 Web 浏览器中显示 PDF 文档，无需依赖任何外部插件。...通过理解其工作原理和集成方法，你可以为用户提供一个无缝的、无需插件的 PDF 查看体验。

    工具-打印jqprint 基于jquery的打印插件

    总的来说，jqPrint插件是jQuery生态系统中一个实用的工具，它简化了Web打印功能的实现，让开发者可以更加专注于页面内容的呈现，而无需过多关注打印的细节。通过合理的配置和调试，开发者可以为用户提供一个高效、...

    超过 40 款很有用而且很新的 jQuery 插件

    它使用SVG技术在现代浏览器中显示地图，并为旧版本IE提供了VML支持。 **特点**： - **跨浏览器兼容性**：支持多种浏览器，包括Firefox、Safari、Chrome、Opera以及IE 6至9。 - **矢量图形**：利用矢量图形技术，...

    Speed-Test:纯 HTML5 网络性能评估工具。 OpenSpeedTest 使用 XMLHttpRequest (XHR)、HTML、CSS、JS 和 SVG 作为网络性能评估工具。 我在 2011 年开始了这个项目，并于 2013 年转移到 OpenSpeedTest.com 专用的 ProjectDomain Name

    无需额外的插件或软件。 TLDR：如果您需要测试 10Gbps 或更多。 您可能需要使用最新的硬件。 在隐私窗口或隐身窗口中使用 Safari 或 Chrome。 要测试 10GbE 或更多，您需要使用最新的硬件。 我使用了带有内置 10GbE...

Magicbox
Global site tag (gtag.js) - Google Analytics