UDN-企业互联网技术人气社区

板块导航

浏览  : 3900
回复  : 2

[HTML5] 原创 HTML5:JS操作SVG实践体会

[复制链接]
白青青的头像 楼主
发表于 2015-11-30 15:07:58 | 显示全部楼层 |阅读模式
  在工业信息化系统里,常常需要动态呈现系统的数据在一张示意图里,用于展现系统状态,分析结果等。这样用JavaScript操作svg 元素就有现实意义。本人近期做了一些实践,现分享一下。

  需求:

  你下面这样一张示意图。
2.png

  A1至A8,分别用显示各个检测或控制点状态,不同状态显示不同颜色。后端技术不是本文讨论重点,前端技术才是本文讨论重点。前端用H5来实现。

  方案:

  一、先将该示意图导出成svg格式的文件。例如”用Viso 绘图,然后导出成svg文件“。
2.png

  二、在浏览器中打开svg文件,查看源码,拷贝svg元素内容。粘贴到你的JS的IDE环境中,用于前端开发。
2.png


2.png

  三 、在IDE里书写你的代码,控制你要实现在逻辑。

  1、清除在style 标记里<![CDATA[]]这样符号,因为它会导致你的JS无法找到你要变色的元素。
  1. <style type="text/css">
  2.        .st1 {fill:url(#grad0-4);stroke:#4f87bb;stroke-width:0.75}
  3.    .st2 {fill:#4f87bb;font-family:黑体;font-size:1.00001em}
  4.    .st3 {font-family:Calibri;font-size:1em}
  5.    .st4 {fill:#4f87bb;font-family:黑体;font-size:0.833336em}
  6.    .st5 {marker-end:url(#mrkr4-22);stroke:#5b9bd5;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
  7.    .st6 {fill:#5b9bd5;fill-opacity:1;stroke:#5b9bd5;stroke-opacity:1;stroke-width:0.28409090909091}
  8.    .st7 {fill:#ffffff;stroke:#ebeff5;stroke-width:0.75}
  9.    .st8 {fill:#759fcc;font-family:Calibri;font-size:0.833336em}
  10.    .st9 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}

  11. </style>
复制代码

  2、接下来要判断浏览器是否支持HTML5
  1. <script type="text/JavaScript">
  2.     //判断浏览器是否支持HTML5
  3.     try {
  4.         document.createElement("canvas").getContext("2d");
  5.     }
  6.     catch (e) {
  7.         document.getElementById("support").innerHTML = "<h3>你的浏览器不支持HTML5,请安装现代化的浏览器。我们推荐使用最新版的Chrome、 FireFox</h3>";
  8.     }

  9. </script>
复制代码

  3、IE比较特殊,不支持动画元素。所以判断浏览器是否支持IE
  1. //判断是否是IE
  2. function isIE() { //ie?
  3.     if (!!window.ActiveXObject || "ActiveXObject" in window)
  4.         return true;     // alert("IE");
  5.     else
  6.         return false;       //alert("NOT IE");
  7. }
复制代码

  4、在<svg>内部加入如下代码,具体含义看备注
  1. <script ><![CDATA[   //这个<![CDATA[不能省略
  2. //假设已请求服务获取Json串,根据配置获得到颜色值。如下列表。
  3. var jsn = [{"Tag": "A8", "Val": "12", "Color": "#ff0000"}, {"Tag": "A7", "Val": "11", "Color": "#ff3300"},
  4.     {"Tag": "A3", "Val": "10", "Color": "#ff6600"},
  5.     {"Tag": "A4", "Val": "9", "Color": "#ffcc00"},
  6.     {"Tag": "A5", "Val": "9", "Color": "#ffff00"},
  7.     {"Tag": "A6", "Val": "8", "Color": "#ff99cc"},
  8.     {"Tag": "A2", "Val": "6", "Color": "#ffcccc"},
  9.     {"Tag": "A1", "Val": "6", "Color": "#ffcccc"}];
  10. //在svg 标记的onload事件中已经设置了SetTagDisplay
  11. function SetTagDisplay() {
  12.     if (isIE()) { //如果是IE使用ieSetColor方法,每隔一秒闪一次
  13.         window.setInterval(ieSetColor, 1000);
  14.     }
  15.     else { //不是的话,可方便了,遍历标记,查找标记,为标记添加动画元素,就可以了。
  16.         for (var i = 0; i < jsn.length; i++) {
  17.             var TagName = jsn[i].Tag;
  18.             var TagColor = jsn[i].Color;
  19.             var sdy = document.createElementNS("http://www.w3.org/2000/svg", "animate"); //创建元素
  20.             sdy.setAttribute("attributeName", "fill"); //动画变化属性fill,填充颜色
  21.             sdy.setAttribute("attributeType", "CSS");  
  22.             sdy.setAttribute("from", "#ffffff"); //从白色开始
  23.             sdy.setAttribute("to", TagColor);//变成它的
  24.             sdy.setAttribute("begin", "1s");
  25.             sdy.setAttribute("dur", "2s");
  26.             sdy.setAttribute("repeatCount", "indefinite");
  27.             document.querySelector("#"+TagName).setAttribute("visibility","visible"); //网上流传很多方法,如:evt.target.ownerDocument; svgDoc.rootElement;这些都不可用。
  28.             document.querySelector("#"+TagName).appendChild(sdy);

  29.         }
  30.     }
  31. }

  32. function ieSetColor() { //IE浏览器效果
  33.     for (var i = 0; i < jsn.length; i++) {
  34.         var TagName = jsn[i].Tag;
  35.         var colorInfo = jsn[i].Color;
  36.         var varRect = document.querySelector("#" + TagName);
  37.         varRect.setAttribute("visibility","visible");
  38.         varRect.setAttribute("class", ""); //必须动态清除原有class 否则展现不出来效果。
  39.         varRect.setAttribute("stroke","#ebeff5");
  40.         varRect.setAttribute("stroke-width","0.75"); //动态设置边框
  41.         var colorSet = varRect.getAttribute("fill");
  42.         if (colorSet == colorInfo) {
  43.             varRect.setAttribute("fill", "#ffffff");
  44.         }
  45.         else {
  46.             varRect.setAttribute("fill", colorInfo);
  47.         }
  48.     }
  49. }

  50. ]]></script>
复制代码

  注意事项:

  1、可以将样式移入css 文件,与普通css文件一样,不需要加CDATA。引入样入文件与用  <link href="svgTest.css" type="text/css" rel="stylesheet"/>

  (网上流传其它方式引入样式文件,经实践都是不可用的。)

  2、手动清除要实现效果元素的上样式(如:rect的class="st1"。或在函数内动态清除(  varRect.setAttribute("class", ""),否则无法显示动态效果

  3、注意颜色f要小写,JS大小写敏感。

  4、操作svg的js代码要写在svg标内。用<script ><![CDATA[    ]]></script>包裹。svg外部定义的变量,函数,svg内部的代码可以访问,调用。

  全部代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <script type="text/JavaScript">
  9.     //判断浏览器是否支持HTML5
  10.     try {
  11.         document.createElement("canvas").getContext("2d");
  12.     }
  13.     catch (e) {
  14.         document.getElementById("support").innerHTML = "<h3>你的浏览器不支持HTML5,请安装现代化的浏览器。我们推荐使用最新版的Chrome、 FireFox</h3>";
  15.     }

  16.     //判断是否是IE
  17.     function isIE() { //ie?
  18.         if (!!window.ActiveXObject || "ActiveXObject" in window)
  19.             return true;     // alert("IE");
  20.         else
  21.             return false;       //alert("NOT IE");
  22.     }

  23. </script>
  24. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
  25.         xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="11.6929in" height="8.26772in"
  26.         viewBox="0 0 841.89 595.276" xml:space="preserve" color-interpolation-filters="sRGB" class="st9" onload="SetTagDisplay()">

  27.     <script ><![CDATA[
  28.     //已请求服务获取Json串,Json串排序处理,根据Value,算出动画颜色得到如下Json串。
  29.     var jsn = [{"Tag": "A8", "Val": "12", "Color": "#ff0000"}, {"Tag": "A7", "Val": "11", "Color": "#ff3300"},
  30.         {"Tag": "A3", "Val": "10", "Color": "#ff6600"},
  31.         {"Tag": "A4", "Val": "9", "Color": "#ffcc00"},
  32.         {"Tag": "A5", "Val": "9", "Color": "#ffff00"},
  33.         {"Tag": "A6", "Val": "8", "Color": "#ff99cc"},
  34.         {"Tag": "A2", "Val": "6", "Color": "#ffcccc"},
  35.         {"Tag": "A1", "Val": "6", "Color": "#ffcccc"}]; //注意颜色f要小写,js大小敏感。 JS获得到的颜色都是小写f

  36.     function SetTagDisplay() {
  37.         if (isIE()) {
  38.             window.setInterval(ieSetColor, 1000);
  39.         }
  40.         else {
  41.             for (var i = 0; i < jsn.length; i++) {
  42.                 var TagName = jsn[i].Tag;
  43.                 var TagColor = jsn[i].Color;
  44.                 var sdy = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  45.                 sdy.setAttribute("attributeName", "fill");
  46.                 sdy.setAttribute("attributeType", "CSS");
  47.                 sdy.setAttribute("from", "#ffffff");
  48.                 sdy.setAttribute("to", TagColor);
  49.                 sdy.setAttribute("begin", "1s");
  50.                 sdy.setAttribute("dur", "2s");
  51.                 sdy.setAttribute("repeatCount", "indefinite");
  52.                 document.querySelector("#"+TagName).setAttribute("visibility","visible");
  53.                 document.querySelector("#"+TagName).appendChild(sdy);

  54.             }
  55.         }
  56.     }

  57.     function ieSetColor() { //IE浏览器效果
  58.         for (var i = 0; i < jsn.length; i++) {
  59.             var TagName = jsn[i].Tag;
  60.             var colorInfo = jsn[i].Color;
  61.             var varRect = document.querySelector("#" + TagName);
  62.             varRect.setAttribute("visibility","visible");
  63.             varRect.setAttribute("class", ""); //必须动态清除原有class 否则展现不出来效果。
  64.             varRect.setAttribute("stroke","#ebeff5");
  65.             varRect.setAttribute("stroke-width","0.75");
  66.             var colorSet = varRect.getAttribute("fill");
  67.             if (colorSet == colorInfo) {
  68.                 varRect.setAttribute("fill", "#ffffff");
  69.             }
  70.             else {
  71.                 varRect.setAttribute("fill", colorInfo);
  72.             }
  73.         }
  74.     }

  75.     ]]></script>
  76.     <v:documentProperties v:langID="2052" v:metric="true" v:viewMarkup="false">
  77.         <v:userDefs>
  78.             <v:ud v:nameU="msvSubprocessMaster" v:prompt="" v:val="VT4(Rectangle)"/>
  79.             <v:ud v:nameU="msvNoAutoConnect" v:val="VT0(1):26"/>
  80.         </v:userDefs>
  81.     </v:documentProperties>

  82.     <style type="text/css">
  83.         .st1 {fill:url(#grad0-4);stroke:#4f87bb;stroke-width:0.75}
  84.     .st2 {fill:#4f87bb;font-family:黑体;font-size:1.00001em}
  85.     .st3 {font-family:Calibri;font-size:1em}
  86.     .st4 {fill:#4f87bb;font-family:黑体;font-size:0.833336em}
  87.     .st5 {marker-end:url(#mrkr4-22);stroke:#5b9bd5;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
  88.     .st6 {fill:#5b9bd5;fill-opacity:1;stroke:#5b9bd5;stroke-opacity:1;stroke-width:0.28409090909091}
  89.     .st7 {fill:#ffffff;stroke:#ebeff5;stroke-width:0.75}
  90.     .st8 {fill:#759fcc;font-family:Calibri;font-size:0.833336em}
  91.     .st9 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}

  92.     </style>

  93.     <defs id="Patterns_And_Gradients">
  94.         <linearGradient id="grad0-4" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(60 0.5 0.5)">
  95.             <stop offset="0" stop-color="#e9eff7" stop-opacity="1"/>
  96.             <stop offset="0.24" stop-color="#f4f7fb" stop-opacity="1"/>
  97.             <stop offset="0.54" stop-color="#feffff" stop-opacity="1"/>
  98.         </linearGradient>
  99.     </defs>
  100.     <defs id="Markers">
  101.         <g id="lend4">
  102.             <path d="M 2 1 L 0 0 L 2 -1 L 2 1 " style="stroke:none"/>
  103.         </g>
  104.         <marker id="mrkr4-22" class="st6" v:arrowType="4" v:arrowSize="2" v:setback="7.04" refX="-7.04" orient="auto"
  105.                 markerUnits="strokeWidth" overflow="visible">
  106.             <use xlink:href="#lend4" transform="scale(-3.52,-3.52) "/>
  107.         </marker>
  108.     </defs>
  109.     <g v:mID="0" v:index="1" v:groupContext="foregroundPage">
  110.         <v:userDefs>
  111.             <v:ud v:nameU="msvThemeOrder" v:val="VT0(0):26"/>
  112.         </v:userDefs>
  113.         <title>页-1</title>
  114.         <v:pageProperties v:drawingScale="0.0393701" v:pageScale="0.0393701" v:drawingUnits="24" v:shadowOffsetX="8.50394"
  115.                 v:shadowOffsetY="-8.50394"/>
  116.         <v:layer v:name="连接线" v:index="0"/>
  117.         <g id="shape2-1" v:mID="2" v:groupContext="shape" transform="translate(37.1568,-425.197)">
  118.             <title>工作表.2</title>
  119.             <desc>系统1</desc>
  120.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  121.             <v:textRect cx="35.4331" cy="531.496" width="70.87" height="127.559"/>
  122.             <rect x="0" y="467.717" width="70.8661" height="127.559" class="st1"/>
  123.             <text x="20.39" y="535.49" class="st2" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>系统<tspan class="st3">1</tspan></text>        </g>
  124.         <g id="shape6-7" v:mID="6" v:groupContext="shape" transform="translate(184.252,-439.37)">
  125.             <title>平行四边形</title>
  126.             <desc>中继1</desc>
  127.             <v:userDefs>
  128.                 <v:ud v:nameU="visVersion" v:prompt="" v:val="VT0(15):26"/>
  129.             </v:userDefs>
  130.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  131.             <v:textRect cx="56.6929" cy="552.756" width="113.39" height="85.0394"/>
  132.             <path d="M0 595.28 L102.05 595.28 L113.39 510.24 L11.34 510.24 L0 595.28 Z" class="st1"/>
  133.             <text x="44.16" y="556.08" class="st4" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>中继<tspan class="st3">1</tspan></text>        </g>
  134.         <g id="shape7-12" v:mID="7" v:groupContext="shape" transform="translate(376.165,-446.457)">
  135.             <title>平行四边形.7</title>
  136.             <desc>中继2</desc>
  137.             <v:userDefs>
  138.                 <v:ud v:nameU="visVersion" v:prompt="" v:val="VT0(15):26"/>
  139.             </v:userDefs>
  140.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  141.             <v:textRect cx="56.6929" cy="552.756" width="113.39" height="85.0394"/>
  142.             <path d="M0 595.28 L102.05 595.28 L113.39 510.24 L11.34 510.24 L0 595.28 Z" class="st1"/>
  143.             <text x="44.16" y="556.08" class="st4" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>中继<tspan class="st3">2</tspan></text>        </g>
  144.         <g id="shape8-17" v:mID="8" v:groupContext="shape" v:layerMember="0" transform="translate(108.023,-490.317)">
  145.             <title>动态连接线</title>
  146.             <path d="M0 595.28 L43.73 595.28 L43.73 610.79 L73.91 610.79" class="st5"/>
  147.         </g>
  148.         <g id="shape9-23" v:mID="9" v:groupContext="shape" v:layerMember="0" transform="translate(291.969,-478.346)">
  149.             <title>动态连接线.9</title>
  150.             <path d="M0 591.73 L16.3 591.73 L16.3 584.65 L82.83 584.65" class="st5"/>
  151.         </g>
  152.         <g id="shape14-28" v:mID="14" v:groupContext="shape" transform="translate(568.078,-432.283)">
  153.             <title>正方形</title>
  154.             <desc>系统2</desc>
  155.             <v:userDefs>
  156.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  157.             </v:userDefs>
  158.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  159.             <v:textRect cx="56.6929" cy="538.583" width="113.39" height="113.386"/>
  160.             <rect x="0" y="481.89" width="113.386" height="113.386" class="st1"/>
  161.             <text x="44.16" y="541.91" class="st4" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>系统<tspan class="st3">2</tspan></text>        </g>
  162.         <g id="shape15-33" v:mID="15" v:groupContext="shape" v:layerMember="0" transform="translate(483.882,-481.89)">
  163.             <title>动态连接线.15</title>
  164.             <path d="M0 588.19 L77.16 588.19" class="st5"/>
  165.         </g>
  166.         <g id="shape16-38" v:mID="16" v:groupContext="shape" transform="translate(42.7112,-460.098)">
  167.             <title>矩形</title>
  168.             <desc>A1</desc>
  169.             <v:userDefs>
  170.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  171.             </v:userDefs>
  172.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  173.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  174.             <rect id="A1" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  175.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A1</text>        </g>
  176.         <g id="shape17-41" v:mID="17" v:groupContext="shape" transform="translate(42.7112,-445.925)">
  177.             <title>矩形.17</title>
  178.             <desc>A2</desc>
  179.             <v:userDefs>
  180.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  181.             </v:userDefs>
  182.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  183.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  184.             <rect id="A2" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  185.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A2</text>        </g>
  186.         <g id="shape18-44" v:mID="18" v:groupContext="shape" transform="translate(42.5197,-431.752)">
  187.             <title>矩形.18</title>
  188.             <desc>A3</desc>
  189.             <v:userDefs>
  190.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  191.             </v:userDefs>
  192.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  193.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  194.             <rect id="A3" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  195.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A3</text>        </g>
  196.         <g id="shape19-47" v:mID="19" v:groupContext="shape" transform="translate(211.066,-445.925)">
  197.             <title>矩形.19</title>
  198.             <desc>A4</desc>
  199.             <v:userDefs>
  200.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  201.             </v:userDefs>
  202.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  203.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  204.             <rect id="A4" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  205.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A4</text>        </g>
  206.         <g id="shape20-50" v:mID="20" v:groupContext="shape" transform="translate(395.318,-452.48)">
  207.             <title>矩形.20</title>
  208.             <desc>A5</desc>
  209.             <v:userDefs>
  210.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  211.             </v:userDefs>
  212.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  213.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  214.             <rect id="A5" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  215.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A5</text>        </g>
  216.         <g id="shape21-53" v:mID="21" v:groupContext="shape" transform="translate(594.893,-466.654)">
  217.             <title>矩形.21</title>
  218.             <desc>A6</desc>
  219.             <v:userDefs>
  220.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  221.             </v:userDefs>
  222.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  223.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  224.             <rect id="A6" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  225.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A6</text>        </g>
  226.         <g id="shape22-56" v:mID="22" v:groupContext="shape" transform="translate(594.893,-452.48)">
  227.             <title>矩形.22</title>
  228.             <desc>A7</desc>
  229.             <v:userDefs>
  230.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  231.             </v:userDefs>
  232.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  233.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  234.             <rect id="A7" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  235.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A7</text>        </g>
  236.         <g id="shape23-59" v:mID="23" v:groupContext="shape" transform="translate(594.893,-438.307)">
  237.             <title>矩形.23</title>
  238.             <desc>A8</desc>
  239.             <v:userDefs>
  240.                 <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
  241.             </v:userDefs>
  242.             <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
  243.             <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
  244.             <rect  id="A8" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
  245.             <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A8</text>        </g>
  246.     </g>
  247. </svg>

  248. </body>
  249. </html>
复制代码

  最后实现效果
2.png


2.png

  Chrome的效果好,过度平滑.

相关帖子

发表于 2015-11-30 15:08:29 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2015-12-4 08:45:06 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老面孔的份上回复一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部