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. nodejs搭建简单的websocket服务端

    创建websocket服务端使用了nodejs-websocket ,首先要安装nodejs-websocket,在项目的目录下: npm install nodejs-websocket 1.搭建w ...

  2. P3209 [HNOI2010]平面图判定

    P3209 [HNOI2010]平面图判定 哈密尔顿环之外的任意一条边,要么连在环内部,要么连在环外部 判断两条边在同一部分会相交,则这两条边必须分开 那么把边看作点连边,跑二分图染色就行 #incl ...

  3. <J2EE学习笔记>关于Servlet的讲义

    题外话:接触java又是半年之前的事情了,当初好好学了java却把cpp给忘了,到现在又把手里发热的cpp给放下重新捡起来java,究竟这两种OOP语言我能不能清晰分开记住呢 以下全部课件来自于同济大 ...

  4. UEditor上传文件的默认地址修改

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text.Re ...

  5. smokeping 微信报警配置

    1. 准备alert脚本,用来调用微信脚本 #!/bin/bash alertname=$ target=$ losspattern=$ rtt=$ smokename="hq_to_idc ...

  6. Word怎么在方框里打勾

    插入--->符号--->其他符号--->在“子集”中选择“数学运算符”.第三行就可以找到“勾”符号,选中后点击“插入”即可. 或插入-->符号-->其他符号-->在 ...

  7. matlab保存txt文件

    save roadsurfacepointcloud.xyz -ascii roaddata2 %保存路面点云文件 roaddata2是变量.

  8. BZOJ 1724 [Usaco2006 Nov]Fence Repair 切割木板：贪心 优先队列【合并果子】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1724 题意: 你要将一块长木板切成n段,长度分别为a[i](长木板的长度 = ∑ a[i] ...

  9. python基础-正则1

    什么是正则表达式? 正则表达式是一种小型的\高度专业化的变成语言,主要用于字符串处理 正则表达式是一种通用语言,在python中通过re模块实现,import re 工具:在线正则表达式测试 http ...

  10. codeforces 658C C. Bear and Forgotten Tree 3(tree+乱搞)

    题目链接: C. Bear and Forgotten Tree 3 time limit per test 2 seconds memory limit per test 256 megabytes ...