深入理解 SVG 系列(一) —— SVG 基础
来源:https://segmentfault.com/a/1190000015652209
本系列文章分为三个部分:
- 第一部分是 SVG 基础。 主要讲 SVG 的一些基础知识,包括 SVG 基本元素,画布和视窗等。
- 第二部分是 SVG 的坐标系统。主要会讲绘图坐标系, viewBox 以及preserveAspectRatio。
- 第三部分是 如何利用 SVG 来实现动画及交互
SVG 基本元素及属性
渲染顺序
元素的渲染顺序非常重要,这决定了一个 SVG 中哪些元素可见,哪些元素不可见。SVG 元素的一个规则是“后来居上”
,也就是说越后面的元素越可见。
<svg width="100" height="100" style="outline: 2px solid red;">
<rect x="0" y="0" width="50" height="50" fill="blue"/>
<rect x="0" y="0" width="50" height="50" fill="green"/>
</svg>
在同一个位置创建了 50 * 50 的两个矩形,由于越后面的元素越可见,因此我们只能看到绿色的矩形,蓝色的矩形被它遮住了。
SVG 值的单位
在 SVG 中,你可以指定值的单位,也可以不指定值的单位。如果不指定值的单位,则默认使用像素 (px) 作为单位。
<svg width="100" height="100">
<circle cx="0" cy="0" r="50%" fill="green">
</svg>
width 和 height 都没有指定单位,那么它们的单位就是 px,相当于宽 100px 高 100px。
circle
的 r 使用百分比作为单位,因为 100px*50%=50px,则圆的半径 r 等于 50px。
单位列表
SVG 支持的长度单位包含了常见的 CSS 单位,如下:
单位 | 含义 |
---|---|
em | 相对于父元素的字体大小 |
px | 相对于屏幕分辨率 |
% | 相对于父元素 |
cm | 即厘米 |
mm | 即毫米 |
in | 即英寸 |
pt | 1/72 英寸 |
pc | 1/21 |
SVG 画布
SVG 画布就是用来绘制 SVG 内容的一个区域。这个画布可以无限延伸,你可以在这个画布的任何位置绘制你想要的内容。
SVG 视窗(viewport)
SVG 视窗和浏览器视窗很像。你可以通过 SVG 视窗看到画布,但其实你只看到了画布的一部分,超过视窗的部分会被裁切并且隐藏。就像一个网页,它可能比浏览器的视窗宽,可能比浏览器的视窗长,但只有在视窗内的页面是可见的。
设置视窗大小
你可以通过给 <svg>
元素设置 width
和 height
来给 SVG 视窗设置宽和高。
当然,你也可以不给视窗设置宽和高,这就会交给用户代理程序去决定,一般默认是 300px * 150px。我们不推荐视窗使用默认的大小,最好还是根据自己的需求去定义。
<!-- 视窗大小为 200px * 200px -->
<svg width="200" height="200">
<circle cx="0" cy="0" r="100" fill="red"/>
</svg>
在 200px * 200px 的视窗内,以画布的 0,0 点(画布的原点和视窗的原点默认对齐)为圆心,半径为 100 画圆
为什么超过视窗的元素不可见
因为每个 SVG 元素都有一个默认的 overflow: hidden
样式,所以超过视窗的内容不可见。你也可以通过设置 overflow: visible
让超出视窗边界的内容变得可见。
<svg width="100" height="100">
<circle cx="0" cy="0" r="50" fill="green"/>
</svg>
深入理解画布和视窗
画布和视窗是两个容易混淆的概念,它们各自独立却又相互关联。理解清楚它们之间的关系很有必要。
为了更好的去理解这两个抽象概念,你可以把视窗想象成飞机上的窗户,把画布想象成无穷无尽的风景,只有在这个窗口内的风景才能被看到。
画布和视窗之间的关联
- 每创建一个
<svg>
元素,就相当于创建了一个无穷大的画布,同时创建了一个视窗。 - 画布和视窗分别对应两个坐标系统,一个用户坐标系,一个视窗坐标系,这两个坐标系统默认是对齐的。如果暂时不理解坐标系统也没关系,请继续往下看,我会在下一节详细说明。
深入理解 SVG 系列(一) —— SVG 基础的更多相关文章
- 学习SVG系列(1):SVG基础
什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形 ...
- SVG系列教程:SVG简介与嵌入HTML页面的方式
地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁 ...
- 学习SVG系列(5):SVG渐变
SVG渐变 渐变是一种从一种颜色到另一种颜色的平滑过渡,可以把多个颜色的过渡应用到同一个元素. 渐变有两种: Linear Redial 线性渐变-<linearGradient> lin ...
- 学习SVG系列(4):SVG滤镜效果
注意:Internet Explorer和Safari不支持SVG滤镜 <defs>.<filter> 所有互联网的SVG滤镜定义在<defs>元素中,<fi ...
- 学习SVG系列(3):SVG Stroke属性
SVG stroke 属性 1.stroke 2.stroke-width 3.stroke-linecap 4.stroke-dasharray 5.stroke-opacity 6.stroke- ...
- Svg.Js 父类的基础操作
一.SVG.Doc 创建SVG文档 var draw = SVG('drawing') <div id="svg1"></div> <script&g ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 转帖:深入理解JavaScript系列
感觉汤姆大叔这个系列写的很是不错,很适合有js基础但是想深入又无从下手的朋友. 深入理解JavaScript系列
随机推荐
- NGINX编译选项
一.减小编译后的文件大小Nginx源码文件解压后,找到auto/cc/gcc文件,注释或删除:# debugCFLAGS= "CFLAGS -g"即可取消debug模式.二:为特定 ...
- Mysql数据库常用操作整理
0.说明 MySQL数据库是一个十分轻便的数据库管理系统,相比大型的数据库管理系统如Oracle,MySQL更拥有轻便.灵活.开发速度快的特色,更适用于中小型数据的存储与架构,被数以万计的网站采用.从 ...
- 电路中GND和GROUND、VCC,VDD,VEE,VSS
电路解析:GND和GROUND.VCC,VDD,VEE,VSS 参考: http://www.elecfans.com/dianzichangshi/20160822432514.html 一.解释版 ...
- (三)JavaScript之[事件]与[字符串]
5].事件**JavaScript事件:HTML事件 * HTML事件是发生在HTML元素上的事情 * HTML事件可以是[浏览器的行为],也可以是[用户的行为] * * 实例: * HTML页面完成 ...
- (二)JavaScript之[函数]与[作用域]
3].函数 /** * 事件驱动函数. * 函数执行可重复使用的代码 * * 1.带参的函数 * 2.带返回值的函数 * 3.局部变量 * * 4.全局变量 * 在函数外的:不用var声明,未声明直接 ...
- window系统安装jdk,jre
java开发少不了安装jdk.当然如果只是想运行其他人的java项目,只需要安装jre就行了,不需要安装jdk,jdk是编译用的.jdk可以同时安装多个 版本,只需要在项目部署时注意切换版本选择.在这 ...
- Android打包混淆文件模板
# This is a configuration file for ProGuard. # http://proguard.sourceforge.net/index.html#manual/usa ...
- 【起航计划 017】2015 起航计划 Android APIDemo的魔鬼步伐 16 App->Alarm->Alarm Controller Alarm事件 PendingIntent Schedule AlarmManager
Alarm Controller演示如何在Android应用中使用Alarm事件,其功能和java.util.Timer ,TimerTask类似.但Alarm可以即使当前应用退出后也可以做到Sche ...
- WannaCry勒索病毒卷土重来:日本本田工厂被迫关闭
6月22日消息,前阵子WannaCry勒索病毒席卷全球,世界各地网络遭到攻击.日前,偃旗息鼓了一阵的WannaCry勒索病毒又重回人们视线,迫使一家汽车厂在日本关闭. 路透社报道,本田Sayama工厂 ...
- 初学React:组件的样式
React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...