HTML中的SVG

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的更多相关文章

HTML5中使用SVG
SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签.你只需定义好XML属性,就能获得一致的图像元素. 使用SVG之前先将标签加入到HTML body ...
HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
Android中使用SVG矢量图（一）
SVG矢量图介绍首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...
在vue中使用svg sprite
概述这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...
在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
1. svg学习笔记-在网页中使用svg
在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...
在网页中使用SVG
SVG可以作为一个独立的文件存在.但更多的时候,我们希望他能集成在某个更大的文档中,比如HTML.将SVG插入到HTML中主要有以下几种方式: 将 SVG 作为图像导入将 SVG放入 iframe ...
HTML 页面中的 SVG
SVG 文件可通过以下标签嵌入 HTML 文档:<embed>.<object> 或者 <iframe>. 1>使用 <embed> 标签 < ...

随机推荐

关于Http状态码
Http状态码表示Http协议所返回的响应的状态.比如客户端向服务器发送请求,如果成功的获得请求的资源,则返回的状态码为200,表示相应成功.如果请求的资源不存在,则通常返回404错误. Http状态 ...
MySQL主从复制(Master-Slave)实践
MySQL数据库自身提供的主从复制功能可以方便的实现数据的多处自动备份,实现数据库的拓展.多个数据备份不仅可以加强数据的安全性,通过实现读写分离还能进一步提升数据库的负载性能. 下图就描述了一个多个数 ...
mongodb之使用explain和hint性能分析和优化
当你第一眼看到explain和hint的时候,第一个反应就是mysql中所谓的这两个关键词,确实可以看出,这个就是在mysql中借鉴过来的,既然是借鉴过来的,我想大家都知道这两个关键字的用处,话不多 ...
css3
CSS3的换行如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-wo ...
阿里云ECS服务器配置（Ubuntu+JAVA+Tomcat+Mysql）
最近购买了阿里云的ECS服务器,就服务器的安装配置做简要的说明,也方便日后查看. 1.远程操作服务器远程操作服务器可以使用putty工具,下载地址:http://pan.baidu.com/s/1q ...
JavaScript 解析 Django Python 生成的 datetime 数据时区问题解决
JavaScript 解析 Django/Python 生成的 datetime 数据当Web后台使用Django时,后台生成的时间数据类型就是Python类型的. 项目需要将几个时间存储到数据库中 ...
使用Jenkins配置自动化构建
持续集成是个简单重复劳动,人来操作费时费力,使用自动化构建工具完成是最好不过的了. 为了实现这个要求,我选择了Jenkins. 从http://mirrors.jenkins-ci.org/windo ...
java数组
1.java是否可以像c一次样搞个不定长数组? 不可以那样写,那样写是非法的.数组构造的时候必须指定长度,因为JVM要知道需要在堆上分配多少空间.也就是要初始化数组的话让JVM知道要给数组分配多少空间 ...
jmeter（九）逻辑控制器
jmeter中逻辑控制器(Logic Controllers)的作用域只对其子节点的sampler有效,作用是控制采样器的执行顺序. jmeter提供了17种逻辑控制器,它们各个功能都不尽相同,大概可 ...
AndroidStudio中make Project、clean Project、Rebuild Project的区别
1.Make Project:编译Project下所有Module,一般是自上次编译后Project下有更新的文件,不生成apk. 2.Make Selected Modules:编译指定的Modul ...

HTML中的SVG

HTML中的SVG的更多相关文章

随机推荐

热门专题