HTML5中的SVG是Scalable Vector Graphic的简称，是一种用来绘制矢量图的HTML5标签，由万维网联盟定制，是一个基于可扩展标记语言，用于绘制二维可缩放矢量图形。

是一种使用XML描述二维图形的语音，允许三种类型的图形对象：矢量图形、图像和文本。

1.绘制一个圆

circle标签用来创建一个圆，cx和cy属性定义圆中心的X和Y坐标，r是圆的半径，stroke和stroke-width属性控制显示形状的轮廓，fill属性设置形状内的颜色
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

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

       <!--circle标签用来创建一个圆，cx和cy属性定义圆中心的X和Y坐标，r是圆的半径，stroke和stroke-width属性控制显示形状的轮廓，fill属性设置形状内的颜色-->

       <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

   </svg>

</body>

</html>

2.绘制简单的形状

<body>

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

       <!--绘制直线-->

       <line x1="0" y1="0" x2="200" y2="0" style="stroke: blue;stroke-width: 10" />

       <circle cx="80" cy="80" r="60" stroke="blue" stroke-width="3" fill="red" />

       <!--绘制矩形-->

       <rect x="20" y="160" width="150" height="150" style="fill:red;stroke:blue;stroke-width:5;"/>

       <!--绘制椭圆 rx：水平轴半径  ry:垂直轴半径-->

       <ellipse cx="300" cy="60" rx="100" ry="50" style="fill:red;stroke:blue;stroke-width:5"/>

       <!--绘制多边型，属性points用于定义多边形每个焦点的x和y-->

       <polygon points="260,130 320,240 410,220" style="fill:red;stroke:blue;stroke-width:5"/>

       <!--绘制曲线，且曲线的每一个部分均由直线构成，属性points用于定义曲线中直线的起点和终点坐标-->

       <polyline points="400,20 440,60 410,110 460,150 410,260 430,320"

                 style="fill:none;stroke:blue;stroke-width:10" />

       <!--绘制文本，属性x和y定义文本的其实坐标-->

       <text x="20" y="360" fill="red">这些都是SVG图形</text>

   </svg>

</body>

3.复用内容

使用SVG绘制一副图形后，使用defs元素标记该图形，然后使用use元素可以实现服用的效果。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<svg viewBox = "0 0 500 500" version = "1.1">

    <defs>

        <circle id = "s1" cx = "100" cy = "100" r = "50" fill = "red" stroke = "blue" stroke-width = "3"/>

    </defs>

    <use x = "0" y = "0" xlink:href = "#s1"/>

    <use x = "50" y = "50" xlink:href = "#s1"/>

</svg>

</body>

</html>

4.图形阴影

图形阴影效果需要借助SVG的滤镜功能

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

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

    <defs>

        <!--设置id作为滤镜的名称-->

        <filter id="f1" x="0" y="0" width="200%" height="200%">

            <!--设置阴影的位置-->

            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

            <!--用来转换偏移的图像使之更接近黑色-->

            <feColorMatrix result="matrixOut" in="offOut" type="matrix"

                           values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />

            <!--stdDeviation设置迷糊量-->

            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />

            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

        </filter>

    </defs>

    <!--rect元素的filter属性用于将元素连接到f1滤镜-->

    <rect width="90" height="90" stroke="blue" stroke-width="5" fill="red" filter="url(#f1)" />

</svg>

</body>

</html>

5.图形的渐变

SVG图形渐变可以分为线性渐变和放射渐变<linearGadient>元素定义线性渐变

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>5.2.5</title>

</head>

<body>

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

    <defs>
           <!--x1,y1,x2,y2用于设置渐变的开始和结束位置坐标-->
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

            <!--stop元素用于设置渐变的颜色，可以有多个-->

            <!--offset设置渐变的位置-->

            <stop offset="0%" style="stop-color:red;stop-opacity:1" />

            <stop offset="100%" style="stop-color:blue;stop-opacity:1" />

        </linearGradient>

    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

</svg>

</body>

</html>

根据渐变起始和结束坐标的不同，可以创建三种线性渐变效果。当y坐标相同，x坐标不同是创建水平渐变；当x坐标相同，y坐标不同时创建垂直渐变；当x和y坐标都不相同时，创建对角渐变。

<radialGradient>元素定义放射渐变

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>5.2.6</title>

</head>

<body>

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

    <defs>

        <!--cx,cy和r用于设置最外层圆的圆心和半径，fx和fy用于设置最内层圆-->

        <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">

            <stop offset="0%" style="stop-color:red; stop-opacity:0" />

            <stop offset="100%" style="stop-color:blue;stop-opacity:1" />

        </radialGradient>

    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

</svg>

</body>

</html>

6.绘制自由路径

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>5.2.7</title>

</head>

<body>

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

   <!--属性d用于设置路径数据，可以包含多个连续指令-->

  <path id="svg_1"

d="m127,385l-1,-34l2,-31l5,-27l7,-19l9,-18l12,-18l15,-13l15,-9l17,-10l15,-7l15,-7l11,-6l19,-4l16,-9l6,-15l2,-15l1,-15l1,-17l3,-18l9,-10l13,-6l13,1l11,7l5,14l1,14l0,18l0,17l0,16l-7,18l-16,7l-13,4l-22,2l-12,0l-23,4l-13,12l-13,8l-9,11l-5,11l-5,12l-1,15l-1,14l-1,10l0,15l8,12l15,5l20,8l9,0l11,0l14,0l22,4l20,5l16,3l13,9l-2,16l-12,8l-14,4l-21,7l-21,2l-19,0l-30,-3l-25,0l-14,0l-12,0l-14,2l-20,0l-25,-4z" stroke-width="5" stroke="#000000" fill="#FF0000"/>

</svg>

</body>

</html>

 

HTML中的SVG的更多相关文章

  1. HTML5中使用SVG

    SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签.你只需定义好XML属性,就能获得一致的图像元素. 使用SVG之前先将标签加入到HTML body ...

  2. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  3. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  4. Android中使用SVG矢量图（一）

    SVG矢量图介绍 首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...

  5. 在vue中使用svg sprite

    概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

  6. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  7. 1. svg学习笔记-在网页中使用svg

    在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...

  8. 在网页中使用SVG

    SVG可以作为一个独立的文件存在.但更多的时候,我们希望他能集成在某个更大的文档中,比如HTML.将SVG插入到HTML中主要有以下几种方式: 将 SVG 作为图像导入 将 SVG放入 iframe ...

  9. HTML 页面中的 SVG

    SVG 文件可通过以下标签嵌入 HTML 文档:<embed>.<object> 或者 <iframe>. 1>使用 <embed> 标签 < ...

随机推荐

  1. 基于TCP的网络编程

    HTTP协议,FTP协议等很多广泛应用的协议均基于TCP协议.TCP编程主要为C/S模式,客户端和服务器之间的程序设计存在较大差异. TCP编程框图 服务器调用socket().bind().list ...

  2. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  3. spring3 DI基础

    Spring IOC容器的依赖有两层含义:Bean依赖容器和容器注入Bean的依赖资源: Bean依赖容器:bean要依赖于容器,这里的依赖是指容器负责创建Bean并管理bean的生命周期.正是由于由 ...

  4. 数组，集合分割函数,join（）

    join函数定义如下: // 串联类型为 System.String 的 System.Collections.Generic.IEnumerable<T> 构造集合的成员,其中在每个成员 ...

  5. Linux虚拟机突然网络不能用了但是主机能ping㣈

    虚拟ping主机时出现: linux network is unreachable 搞了好久搞不定,之前都是好的 突然这样了. 解决办法: 第一步: "虚拟机设置"中的" ...

  6. codevs 3288 积木大赛

    题目描述 Description 春春幼儿园举办了一年一度的"积木大赛".今年比赛的内容是搭建一座宽度为 n 的大厦,大厦可以看成由 n 块宽度为1的积木组成,第i块积木的最终高度 ...

  7. 通过form表单的形式下载文件。

    在项目中遇到问题,要求动态拼接uri下载文件.但是由于项目的安全拦截导致window.location.href 和 window.open等新建窗口的方法都不行. 无意间百度到了通过form表单来下 ...

  8. [LeetCode] Power of Two 判断2的次方数

    Given an integer, write a function to determine if it is a power of two. Hint: Could you solve it in ...

  9. [LeetCode] Search a 2D Matrix 搜索一个二维矩阵

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  10. 怎样简单灵活地将DataTable中的数据赋值给model

    最近在做的一个项目中,有13个方法都需要用到同一种处理方式:通过SQL语句从数据库获取一条指定的数据,并将该数据中的每个值都赋值给一个model,再将这个model中的数据通过微信发送出去.每个方法都 ...