前端必备知识点—SVG

640?wx_fmt=jpeg

基本内容

什么是SVG? 全称为Scalable Vector Graphics,是一种使用XML技术描述二维图形的语言,简单来说 - 矢量图(不失真)

SVG与HTML5的关系

早在HTML5之前,存在SVG技术

SVG文件扩展名为".svg"

在HTML5出现之前,要在HTML页面中引入SVG文件

在HTML5出现之后,将SVG内容直接定义在HTML页面中

SVG的优势

可以使用文本编辑器创建和修改,SVG可被搜索、索引等,SVG绘制的图像不失真的

SVG与Canvas的区别

SVG不依赖于分辨率,使用DOM或绑定事件,实现大型渲染区域的应用(地图类)

Canvas依赖于分辨率,不能使用DOM或绑定事件的,运行时以图片形式出现".jpg"

SVG的标准也是W3C定制的

设置样式

1.通过元素的属性方式

fill - 设置填充样式

fill-opacity - 设置填充透明度

stroke - 设置描边样式

stroke-width - 设置边框的宽度

2.通过style属性,使用类似于CSS属性设置方式

注意 - 不能使用CSS中的样式进行设置

transform属性,用于设置转换效果

方法有:rotate()、scale()、translate()

640?wx_fmt=jpeg

绘制图形

矩形元素- <rect>元素

<rect x="" y="" width="" height="" rx="" ry="" />

x和y - 绘制矩形的左上角坐标值

width和height - 设置绘制矩形的宽度和高度

rx和xy - 设置圆角矩形

圆形元素 - <circle>元素

<circle cx="" cy="" r="" />

cx和cy - 绘制圆形的圆心坐标值

cx和cy不设置值的话,默认为(0,0)

r - 绘制圆形的半径

椭圆元素- <ellipse>元素

<ellipse cx="" cy="" rx="" ry="" />

cx和cy - 绘制椭圆的圆心坐标值

rx - 绘制椭圆的水平方向的半径

ry - 绘制椭圆的垂直方向的半径

注意:当rx和ry的值相同时,绘制的是圆形

线条元素- <line>元素

<line x1="" y1="" x2="" y2="" />

x1和y1 - 绘制直线的起点坐标值

x2和y2 - 绘制直线的终点坐标值

注意:绘制直线时,默认描边颜色为白色

折线元素 - <ployline>元素

<polyline points="" />

points - 折线的所有点坐标值,都设置在该属性中

注意:描边颜色默认为白色,填充颜色默认为黑色

多边形元素- <polygon>元素

<polygon points="" />

points - 折线的所有点坐标值,都设置在该属性中

注意: SVG绘制图形使用元素

单标签 - 增加结束符"/"

起始标签

640?wx_fmt=jpeg

特效元素

线性渐变 - 基准线

<defs>

<linearGradient id="grad" x1="基准线的起点坐标值x" y1="基准线的起点坐标值y" x2="基准线的终点坐标值x" y2="基准线的终点坐标值y">

<stop offset="0%~100%" stop-color="颜色" />

</linearGradient>

</defs>

<rect fill="url(#渐变元素的id)">

射线渐变 - 基准圆

<defs>

<radialGradient id="grad" fx="设置起点基准圆的圆心x" fy="设置起点基准圆的圆心y" cx="设置终点基准圆的圆心x" cy="设置终点基准圆的圆心y" r="设置终点基准圆的半径">

<stop offset="0%~100%" stop-color="颜色" />

</radialGradient>

</defs>

<rect fill="url(#渐变元素的id)">

注意:线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值,允许为负值,允许为大于 100% 的值

设置渐变颜色位置必须是百分值

只能是从 0% ~ 100%

滤镜元素 - 高斯模糊

滤镜元素 - <filter>元素

高斯模糊 - <feGaussianBlur>元素


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272494.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CocoaPods安装和使用及问题:Setting up CocoaPods master repo

CocoaPods是什么&#xff1f; 当你开发iOS应用时&#xff0c;会经常使用到很多第三方开源类库&#xff0c;比如JSONKit&#xff0c;AFNetWorking等等。可能某个类库又用到其他类库&#xff0c;所以要使用它&#xff0c;必须得另外下载其他类库&#xff0c;而其他类库又用到其他…

进程间的通信IPC(无名管道和命名管道)

进程间的通信IPC介绍 进程间通信&#xff08;IPC&#xff0c;InterProcess Communication&#xff09;是指在不同进程之间传播或交换信息。 IPC的方式通常有管道&#xff08;包括无名管道和命名管道&#xff09;、消息队列、信号量、共享存储、Socket、Streams等。其中 Socket…

那些关于浏览器的趣图和幽默段子

1、当浏览器化作一种枪&#xff0c;你喜欢用哪种呢&#xff1f;2、这神奇的反射弧&#xff0c;有点长…3、浏览器们成长的烦恼4、这么说来&#xff0c;IE浏览器扳回一分&#xff01;5、如何用浏览器区分 HTML和 HTML56、都在吹牛&#xff0c;还是IE最务实&#xff01;7、主流浏…

前端新手程序员不知道的 20个小技巧

1.作为前端开发者&#xff0c;使用双显示器能大幅提高开发效率。2.学编程最好的语言不是PHP&#xff0c;是English。3.东西交付之前偷偷测试一遍。4.问别人之前最好先自己百度&#xff0c;google一下&#xff0c;以免问出太低级的问题。5.把觉得不靠谱的需求放到最后做&#xf…

DBA十大必备工具(SQLServer)

曾经和一些DBA和数据库开发人员交流时&#xff0c;问他们都用过一些什么样的DB方面的工具&#xff0c;大部分人除了SSMS和Profile之外&#xff0c;基本就没有使用过其他工具了&#xff1b;诚然&#xff0c;SSMS和Profile足够强大&#xff0c;工作的大部分内容都能通过它们搞定&…

JS一些常用的类库

一、返回上一页&#xff08;history&#xff09;发觉有两种用法&#xff1a;1、javascript:history.back(-1);2、javascript:history.go(-1);它们俩的区别是&#xff1a;history.back(-1):直接返回当前页的上一页&#xff0c;数据全部消息&#xff0c;返回新页面history.go(-1)…

Linux上线程开发API概要(线程)

进程与线程 典型的UNIX/Linux进程可以看成只有一个控制线程&#xff1a;一个进程在同一时刻只做一件事情。有了多个控制线程后&#xff0c;在程序设计时可以把进程设计成在同一时刻做不止一件事&#xff0c;每个线程各自处理独立的任务。 进程是程序执行时的一个实例&…

Redis学习笔记1-Redis数据类型

Redis数据类型 Redis支持5种数据类型&#xff0c;它们描述如下&#xff1a; Strings - 字符串 字符串是 Redis 最基本的数据类型。Redis 字符串是二进制安全的&#xff0c;也就是说&#xff0c;一个 Redis 字符串可以包含任意类型的数据&#xff0c;一个字符串最大为 512M 字节…

30个非常有趣的404错误页面设计欣赏

当用户访问一个不存在的页面的时候就会出现404错误页面&#xff0c;这对用户来说是很不友好的。所以很多网站都会去设计一个新颖的错误页面&#xff0c;以吸引用户继续浏览其它的网页内容。今天这篇文章就收集了30个非常有趣的404错误页面设计欣赏&#xff0c;希望能带给你灵感…

5 个最佳的 Linux 桌面环境

打算把每个桌面都试用一遍&#xff0c;但是那很费时间&#xff0c;而且确实有很多桌面环境可供选择&#xff0c;这就是我发表“最优秀的 Linux 桌面以及他们的优缺点”的目的&#xff0c;本文告诉你在选择桌面时需要注意些什么&#xff0c;让我们开始吧。1. KDE我想从第五个说起…

SQL Server 2008 R2:快速清除日志文件的方法

本例&#xff0c;快速清理“students”数据库的日志&#xff0c;清理后日志文件不足1M。USE [master] GO ALTER DATABASE students SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE students SET RECOVERY SIMPLE GO USE students GO--此处需要注意&#xff…

linux网络编程之字节序

进程间通信 特点&#xff1a;依赖于内核&#xff0c;造成缺陷——无法实现多机通信。 网络编程 地址&#xff1a;由IP地址和端口号构成&#xff0c;端口号用来判断客户端接入哪个服务器。 数据的交流&#xff1a;涉及到协议&#xff08;http&#xff0c;tcp&#xff0c;udp&…

C#中DateTime.Ticks属性及Unix时间戳转换

DateTime.Ticks&#xff1a;表示0001 年 1 月 1 日午夜 12:00:00 以来所经历的 100 纳秒数&#xff0c;即Ticks的属性为100纳秒&#xff08;1Ticks 0.0001毫秒&#xff09;。Unix时间戳&#xff1a;是从1970年1月1日&#xff08;UTC/GMT的午夜&#xff09;开始所经过的秒数&am…

socket 网络 编程

网络编程场景 自己是客户端站在5栋楼前&#xff0c;自己要找到5栋楼中的一座并进入某一间房间&#xff0c;这时第二座楼上有人在用汉语&#xff08;tcp/udp&#xff09;说话,我的ip地址&#xff08;楼号&#xff09;是…&#xff0c;我的端口号&#xff08;房间号&#xff09;是…

7个免费的Linux FTP客户端工具

在Dropbox、YouSendIt、idrive以及许多这样云存储和共享工具的帮助下&#xff0c;我们在互联网上发送和共享大型文件变得容易起来。所有这些网站都可以帮助你在互联网上传送文件&#xff0c;但如果你要分享庞大的数据&#xff0c;这依然是很复杂的事情。所以&#xff0c;你需要…

树莓派的几种登录方式及树莓派的网络配置

&#xff08;1&#xff09;HDMI 视频线 连接到显示器 &#xff08;2&#xff09;串口 设备破解&#xff1a; 默认情况下,树莓派的串口和蓝牙连接&#xff0c;把串口用来数据通信。 修改系统配置&#xff0c;启用串口登录树莓派 1.打开SD卡根目录的"config.txt"文件…

【收集】11款Linux数据恢复工具

如果你使用的是Linux操作系统&#xff0c;那么你一定想知道一旦硬盘崩溃的话又该如何保存和恢复数据。其实&#xff0c;现在有很多Linux数据恢复工具可以让我们摆脱数据安全的困扰。小编已经为各位准备好了一些最好的Linux数据恢复工具&#xff0c;欢迎大家品鉴。KnoppixKnoppi…

VIM更新

1、可以用以下指令 sudo apt-get install vim2、默认的是国外的源&#xff0c;apt-get 安装失败的时候&#xff0c;我们更换成国内的源。 &#xff08;1&#xff09; 编辑sources.list 打开终端输入 sudo nano /etc/apt/sources.list用#注释或直接删除原有的内容&#xff0c…

8款适合Linux用户使用的数据库管理工具

从内容管理系统到简单的表格&#xff0c;数据库是每一个开发项目的一部分。这就是为什么开发者们如此强调使用正确类型的数据库工具。下面这些可能对您有所帮助&#xff01;1. AutotablaAutotabla是一个你的程序的SQL数据表的CGI管理界面。只需要提供你数据库架构的XML描述&…

为什么Chrome浏览器特爱吃内存

微软用惯用的手法——改名——给 IE 被黑的一生画上了句号。还好&#xff0c;它在技术段子圈里早就有了接班人&#xff1a;Chrome。Chrome 很好很强大&#xff0c;速度极快、功能很多。但同时它也是你的电脑内存不足或者耗电太快的罪魁祸首。没办法&#xff0c;Chrome 太爱吃内…