HTML5如何用 SVG标签显示SVG图-HTML教程-爱易网页

HTML5如何用 SVG标签显示SVG图

日期：2014-05-17　浏览次数：20773 次

HTML5怎么用 SVG标签显示SVG图？
HTML5怎么用 SVG标签显示SVG图？我这么写没效果。

w

HTML code

 <svg width="200" height="200"> 
 <rect
  x="0" y="0"
  width="100" height="100"
  fill="blue" stroke="red"
  stroke-width="5px"
  rx="8" ry="8"
  id="myRect" class="chart" />
 </svg>

------解决方案--------------------
存储x.html在firefox中即可显示，ie9之前的版本需要安装SVGViwer。非IE或者IE9之后可以直接显示

<!doctype html>
<html>
<body>
<svg width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>
------解决方案--------------------
ie8可以使用这种方法显示
<embed src="a.svg"></embed>

opera可以使用这2种方法显示
<embed src="a.svg"></embed>
<img src="a.svg">

Firefox可以使用3种方法显示
<!doctype html>
<html>
<body>
<embed src="a.svg"></embed>
<img src="a.svg">
<svg width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>

a.svg
的格式

XML code

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
 <rect
  x="0" y="0"
  width="100" height="100"
  fill="blue" stroke="red"
  stroke-width="5px"
  rx="8" ry="8"
  id="myRect" class="chart" />
 </svg>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5如何用 SVG标签显示SVG图

相关资料更多>

推荐阅读更多>

HTML5如何用 SVG标签 显示SVG图

相关资料更多>

推荐阅读更多>

HTML5如何用 SVG标签显示SVG图