svghtml5,svg html5

如何在HTML中显示SVG?

SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性,就能获得一致的图像元素。

创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业服务器托管报价,主机托管价格性价比高,为金融证券行业西云机房,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样,可以为SVG标签为之添加ID属性。也可以为之添加css样式,例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。将SVG元素加入到HTML代码中,SVG提供很多绘图形状,例如线条、圆、多边形等。

SVG线条:

SVG线条用标签定义,在此标签内你还可以定义其他的属性。

该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后,可以为之添加一些样式,在style属性中使用“stroke:Green;”为线条指定颜色。同样也可以用stroke-width:2为线条设置宽度。

代码1:使用SVG画线

HTML5 SVG Line Example

!----

SVG画圆:

SVG提供了一种不同的标签来画圆。正如你看到的下面代码,circle有个id为myCircle。为了定义圆的中心以及半径,使用cx="55" cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D" stroke-width="2"定义圆周线条颜色和宽度。

代码2:使用SVG画圆

HTML5 SVG Circle Example

SVG矩形:

同样的使用标签来画矩形,我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽,使用 fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意,我用 fill-opacity="0.5" stroke-opacity="0.5" 为 stroke 和 filling 都添加了透明度。

代码3:SVG画矩形

HTML5 SVG Rectangle Example

SVG椭圆:

同样是用标签来绘制椭圆。设置其 id="myEllipse" ,给定起中心坐标 cx="120"cy="60",长轴短轴半径 rx="100" ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208;stroke:black;stroke-width:3"。

代码4:SVG画椭圆

HTML5 SVG Ellipse Example

SVG多边形:

使用特定标签绘制多边形,points属性用来定义多边形的几个顶点,用左边对来定义,形如 points="10,10 75,150 150,60" ,这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样,用 style="fill:#63BCF7;stroke:black;stroke-width:3" 定义多边形填充颜色、边框以及边框宽度。

代码5:SVG画多边形

HTML5 SVG Polygon Example

HTML5画布和SVG的不同

canvas 与 SVG都能够使你在浏览器中画图,但它们的基本原理不同。

SVG 

SVG是一种在XML中描述二维图形的语言。 

SVG是基于XML的,意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。 

在SVG中,每一个图形被记作一个对象。如果一个SVG对象的属性发生改变,浏览器可以自动重新生成图形。

Canvas 

Canvas能够在fly上画2D图形(使用JS) 

Canvas能够按照像素重新生成。 

在Canvas中,一旦图形完成,就会被浏览器忘记。如果图形位置要发生改变,那么整个屏幕需要重画,包括图形覆盖的对象。

SVG 与 HTML5 的 canvas 各有什么优点,哪个更有前途

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序(比如谷歌地图)

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

不适合游戏应用

参考资料

如何在HTML5中使用SVG

对于开发人员而言,最直观的区别在于: 1.对于画在Canvas上的部件,你需要处理重绘。而SVG则不用,你修改svg dom则系统会自动帮你重绘 2.Hittest,即canvas不负责帮你侦测鼠标/触摸事件发生在哪一个图形元件上;而svg可以。 3.Canvas效率高得多 canvas的工作方式就像传统的2d图形引擎比如GDI;而SVG的工作方式更像WPF(XAML)、HTML/CSS这类由标记控制的绘图引擎


分享标题:svghtml5,svg html5
网站链接:http://myzitong.com/article/dsggogs.html