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.10: Anomaly detection

    1. Algorithm 2. evaluating an anomaly detection system 3. anomaly detection vs supervised learning 4 ...

  2. css三角形实现的几种方法的区别

    演变: .triangle{ height: 30px; width: 30px; display: inline-block; border: 30px solid; border-color: # ...

  3. 只会用就out了，手写一个符合规范的Promise

    Promise是什么 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Prom ...

  4. BeginPaint和GetDC有什么区别

    windows编程问题 第一种情况显示出来的字很正常. case WM_PAINT: gdc = BeginPaint (hwnd, &ps); TextOut (gdc, 0, 0, s, ...

  5. poj 1469 COURSES (二分图模板应用 【*模板】 )

    COURSES Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18454   Accepted: 7275 Descript ...

  6. spring 路径配置通配符是如何实现的

    在spring的配置文件中.经常看见类似这样的配置路径: classpath:/com/module/**/*sql.xml 系统会根据配置路径自动加载符合路径规则的xml文件. Spring还提供了 ...

  7. ubuntu上swift开发学习2

    使用包管理器(package manager)创建一个可执行的项目 1. 创建一个Hello目录,然后进入目录 $ mkdir Hello $ cd Hello 2. 使用包初始化命令,参数表示创建一 ...

  8. 9.1 NOIP普及组试题精解(2)

    9-4 soldier.c #include <stdio.h> #define MAXN 21 }; int n, m, x, y; //n,m为B点的行列坐标位置,x,y为马的坐标位置 ...

  9. linux命令学习笔记（34）：du 命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看, 还是和df命令有一些区别的. ．命令格式: du [选项][文件] ．命令功能: ...

  10. Linux User

    1.用户的工作目录,在/etc/passwd中查看 2.如果shell=bin/false(正常为bin/bash)代表禁止登录,这样就无法登录以及通过su进行切换: 3.修改,usermod -d ...