前端必备知识点—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…

IPC 共享内存和 消息队列(发送、接收、移除)以及键值的生成

一、消息对列 消息队列&#xff0c;是消息的链接表&#xff0c;存放在内核中。一个消息队列由一个标识符&#xff08;即队列ID&#xff09;来标识。 特点&#xff1a; 消息队列是面向记录的&#xff0c;其中的消息具有特定的格式以及特定的优先级。消息队列独立于发送与接收进…

DBA十大必备工具(SQLServer)

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

linux 信号和信号量编程

对于 Linux来说&#xff0c;实际信号是软中断&#xff0c;许多重要的程序都需要处理信号。信号&#xff0c;为 Linux 提供了一种处理异步事件的方法。比如&#xff0c;终端用户输入了 ctrlc 来中断程序&#xff0c;会通过信号机制停止一个程序。 信号概述 信号的名字和编号&…

安卓动画基础讲解

//逐帧动画 /** * 1.加入单张图片 * 2.生成movie.xml整个图片 * 3.代码中使用图片movie.xml */ iv(ImageView) findViewById(R.id.iv);// iv.setImageResource(R.drawable.movie);//为iv加载六张图片// AnimationDrawable ad(AnimationDrawable) iv.getDrawable();//得到图片给…

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;希望能带给你灵感…

线程同步之互斥量加锁解锁 死锁

与互斥锁相关API 互斥量&#xff08;mutex&#xff09;从本质上来说是一把锁&#xff0c;在访问共享资源前对互斥量进行加锁&#xff0c;在访问完成后释放互斥量上的锁。对互斥量进行加锁后&#xff0c;任何其他试图再次对互斥量加锁的线程将会被阻塞直到当前线程释放该互…

游戏开发-从零开始 002

个人开发者的游戏大部分需要完成的内容&#xff1a; 1.完整的游戏玩法逻辑&#xff08;核心&#xff09; 2.UI 3.游戏关卡设计 4.游戏旁白 5.交互细节 6.游戏分享接口 7.游戏道具 8.游戏排行榜&#xff0c;游戏社区&#xff0c;如 GameCenter 9.游戏内购 如 remove Ads 10.广告…

5 个最佳的 Linux 桌面环境

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

线程条件控制实现线程的同步

与条件变量相关API 条件变量是线程另一可用的同步机制。条件变量给多个线程提供了一个会合的场所。条件变量与互斥量一起使用时&#xff0c;允许线程以无竞争的方式等待特定的条件发生。 条件本身是由互斥量保护的。线程在改变条件状态前必须首先锁住互斥量&#xff0c…

自定义能够for each的类,C#,Java,C++,C++/cli的实现方法

自定义类能够被for each&#xff0c;应该算是个老生常谈的话题了&#xff0c;相关的资料都很多&#xff0c;不过这里整理总结主流语言的不同实现方式&#xff0c;并比较部分细节上的差异。 第一种语言&#xff0c;也是实现起来最简单的Java语言。在Java里&#xff0c;要被for e…

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&…

Oracle查看表空间和表空间中的对象

select * from user_tables;--查询所有用户表 select username,default_tablespace from user_users;--查询当前表空间select tablespace_name from dba_tablespaces;--查询所有表空间select tablespace_name, sum(bytes)/1024/1024 from dba_data_files group by tablespace_n…