SVG在HTML5中的应用

SVG（Scalable Vector Graphics）是用来绘制矢量图的HTML5标签。只要定义好XML属性就能够获得与其一致的图像元素。

　使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px" width="200px" 为其添加高度和宽度。

一、      用SVG画线条：

<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">

<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>

</svg>

其中：指定x1,y1,x2,y2值来代表起点终点坐标，在style属性中使用“stroke:Green;”为线条指定颜色。用stroke-width:2为线条设置宽度。

二、      用SVG画圆：

<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">

<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />

</svg>

其中：圆的中心cx="55" cy="55"，半径r="50"，fill="#219E3E"填充颜色，stroke="#17301D" stroke-width="2"线条颜色与宽度

三、      用SVG画矩形

<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">

<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2"  fill="blue" fill-opacity="0.5" stroke-opacity="0.5"/>

</svg>

其中：stroke="#17301D" stroke-width="2"定义边框的颜色和宽度

四、      SVG画椭圆

<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
    <ellipse id="myEllipse" cx="120"
cy="60" rx="100" ry="50"
style="fill:#3F5208;stroke:black;stroke-width:3"/>   
</svg>

其中：中心坐标cx="120"
cy="60"，长轴短轴半径 rx="100" ry="50"

五、      SVG画多边形

<svg
id="svgPolygonTutorial" height="200"
xmlns="http://www.w3.org/2000/svg">

<polygon id="myPolygon" points="10,10 75,150
150,60" style="fill:blue;stroke:black;stroke-width:3"/>

</svg>

points="10,10 75,150 150,60"定义三个顶点(10,10),(75,150),(150,60)

举例：

<!DOCTYPE html>

<html>

<body>

<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

</svg>

</body>

</html>

关于HTML5用SVG画图的更多相关文章

  1. 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  2. HTML5实战——svg学习

    百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也 ...

  3. Svg 画图(电池)

    公司现在在做充电桩项目,其中要显示充电桩的电池充电情况,功能展示的时候要画图,之前做的时候准备使用HightChar来画,但是,hightchar好像没有这样的电池图形,最后,项目经理要我自己通过sv ...

  4. HTML5简易在线画图工具

    继上次学习了HTML5的路径画圆做了动态时钟.异次元空间的反转做了运动的太阳系,这两天将画线.画圆.填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括 ...

  5. jmGraph：一个基于html5的简单画图组件

    jmGraph:一个基于html5的简单画图组件 特性: 代码书写简单易理解 面向对象的代码结构 对图形控件化 样式抽离 模块化:入seajs实现模块化开发 兼容性:暂只推荐支持html5的浏览器:i ...

  6. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  7. html5之canvas画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  8. HTML5之SVG

    1.背景 SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形.1998年,万维网联盟成立了一个工作组,研发一种通过 XML来表现矢量图形的技术——SVG!由于SVG也是 ...

  9. 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是Html5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了.实际上很多从业人员并没有深入理解业界为什么要推出HTM ...

随机推荐

  1. Machine Learning No.4: Regularization

    1. Underfit = High bias Overfit = High varience 2. Addressing overfitting: (1) reduce number of feat ...

  2. Express的基本使用

    前言 列表项目Express是一个简介而灵活的node.js Web应用框架提供的一系列强大特性帮助你创建各种 Web 应用,和丰富的HTTP工具. 正文 一个简单的express框架实例 ``` / ...

  3. Android蓝牙通讯【转】

    本文转载自:http://blog.csdn.net/vnanyesheshou/article/details/51554852 随着可穿戴设备的流行,研究蓝牙是必不可少的一门技术了. 总结了下蓝牙 ...

  4. POJ3294 Life Forms —— 后缀数组 最长公共子串

    题目链接:https://vjudge.net/problem/POJ-3294 Life Forms Time Limit: 5000MS   Memory Limit: 65536K Total ...

  5. ffmpeg给视频加文字水印

    ffmpeg -i dd2800.mp4 -vf "drawtext=fontfile=Arial.ttf: text='Hu':x=100:y=10:fontsize=24:fontcol ...

  6. laravel 在apache或nginx的配置

    laravel 下载后,如何运行起来呢,根据自己的应用,记录了几个关键点: 1.apache 配置: 打开http.conf文件,将mod_rewrite前面的#去掉(启用重写模块): 2.nginx ...

  7. C#SocketAsyncEventArgs实现高效能多并发TCPSocket通信 (服务器实现)

    http://freshflower.iteye.com/blog/2285272 想着当初到处找不到相关资料来实现.net的Socket通信的痛苦与心酸, 于是将自己写的代码公布给大家, 让大家少走 ...

  8. codeforces 558B B. Amr and The Large Array(水题)

    题目链接: B. Amr and The Large Array time limit per test 1 second memory limit per test 256 megabytes in ...

  9. <十七>UML核心视图动态视图之时序图

    一:时序图 --->时序图是用于描述按时间顺序排列的对象之间的交互模式. --->它按照参与交互的对象所具有的“生命线”和他们相互发送的消息来显示这些对象. --->时序图包含对象和 ...

  10. Words Gems

    所有的东西都来自抄袭.来自学习.不同的是用新的方法做其他公司做过的事情.很多公司做同样的事情,但只有一家公司最成功.你要发现一个有需求的服务,并做得比别人更好,而不是比别人更早.