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. 小米系列手机调试Installation failed with message Failed to establish session

    用Android studio 2.3调度程序时提示"Installation failed with message Failed to establish session"错误 ...

  2. 通过崩溃trace来查找问题原因

    从友盟中, 我们可能会得到如下信息: Application received signal SIGSEGV (null) ( 0 CoreFoundation 0x359348a7 __except ...

  3. Spring Boot2.0之注解方式启动Springmvc

    回顾下springmvc原理图: DispatcherServlet是Spring MVC的核心,每当应用接受一个HTTP请求,由DispatcherServlet负责将请求分发给应用的其他组件. 在 ...

  4. oracle_sql的用法？

    本机连接oracle 数据库?打开cmd ----> 不同的用户有不同的用户名密码 ----> sqlplus scott/tiger(安装oracle数据库预留的用户)---- 回车 - ...

  5. 鸟哥的linux私房菜 - 第三章 主机规划与磁盘分区

    各硬件装置在linux中的文件名 在linux系统中,每个装置都被当成一个档案来对待. 常见的装置与其在linux中的档名: 磁盘分区 磁盘链接的方式与装置文件名的关系 个人计算机常见的磁盘接口有两种 ...

  6. hdmap相关单词

    交叉口(junction) 交叉口组(junctiongroup)

  7. jsp九大内置对象和其作用详解

    jsp九大内置对象和其作用详解 JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.p ...

  8. Android Studio 主题、字体大小的设置

    1. Android Studio 主题的设置: 设置Android Studio 自带的主题 设置第三方主题 2. Android Studio 字体的设置 设置左面包名的字体大小 设置右面代码编辑 ...

  9. linux网络编程 inet_aton(); inet_aton; inet_addr;

    . inet_aton()是一个改进的方法来将一个字符串IP地址转换为一个32位的网络序列IP地址. . inet_ntoa() 本函数将一个用in参数所表示的Internet地址结构转换成以“.” ...

  10. 关于禁用bootstrap响应式解决方法

    前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...