《SVG精髓》笔记(一)
本文是基于《SVG精髓》一书的简单总结,文中的demo均为该书提供,目的是方便大家使用时快速查阅。
1. 坐标系统
- 视口(viewport):文档使用的画布区域,表示SVG可见区域的大小,通常可以在
<svg>元素
上使用 width 和 height 属性确定视口的大小。 viewBox:允许指定一个给定的一组图形伸展以适应特定的容器元素。这个属性值由4个数值组成,
viewBox = <min-x> <min-y> <width> <height>
, 分别代表想要叠加在视口上的用户坐标系统的最小x坐标、最小y坐标、宽度和高度。(可以理解为SVG内元素定位的真实坐标系统)<svg width="4cm" height="5cm" viewBox="0 0 64 80"> <rect x="10" y="20" width="40" height="40" style="stroke: black; fill: none"/> </svg>
viewport宽高为4cm和5cm(画布区域),viewBox的左上角(0, 0)与viewport重合,宽度是64个单位(每个单位1/16cm),高度是80个单位(每个单位1/16cm)。矩形rect的坐标是相对viewBox来定位的(如果没有设置viewBox,默认坐标系统就是viewport)demo1preserveAspectRatio:可以指定被缩放的图像相对视口的对齐方式,以及是希望它适配边缘还是要裁减。该属性的模型为:
preserveAspectRatio = "alignment [meet | slice]"
alignment :指定轴和位置,由一个x对齐方式和一个y对齐方式(min, mid, max)组合而成。默认为
xMidYMid
。y对齐 xMin xMid xMax yMin xMinYmin
视口左侧边缘、顶部边缘对齐xMidYmin
视口水平中心、顶部边缘对齐xMaxYmin
视口右侧边缘、顶部边缘对齐yMid xMinYmid
视口左侧边缘、垂直中心xMidYmid
视口水平中心、垂直中心xMaxYmid
视口右侧边缘、垂直中心yMax xMinYmax
视口左侧边缘、底部边缘对齐xMidYmax
视口水平中心、底部边缘对齐xMaxYmax
视口右侧边缘、底部边缘对齐meet :缩小图像以适配可用的空间。
slice :裁减图像不适合视口的部分。
上面的例子中,viewport和viewBox的宽高是等比缩放的,如果比例不同,就有可能出现溢出demo2
2. 基本形状
SVG中的基本形状
形状 描述 <line x1="start-x" y1="start-y" x2="end-x" y2="end-y" /> 从起始点(start-x, start-y) 画一条线到 (end-x, end-y) demo <rect x="left-x" y="top-y" width="width" height="height" /> 画一个矩形,左上角位于(left-x, top-y),宽高分别为width和height demo <circle cx="center-x" cy="center-y" r="radius" /> 以指定半径radius画一个圆,圆心位于(center-x, center-y) demo <ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" /> 画一个椭圆,x方向半径为x-radius,y方向半径为y-radius, 圆心位于(center-x, center-y) <polygon points="points-list" /> 画一个封闭图形,轮廓由points-list指定,它由一系列x/y坐标对组成。 这些数值只能使用用户坐标,不可以添加长度单位。 demo <polyline points="points-list" /> 画一系列相连的折线段,折线点由points-list指定, 它由一系列x/y坐标对组成。 这些数值只能使用用户坐标,不可以添加长度单位。 demo 笔画特性
属性 值 stroke 笔画颜色,默认为none demo stroke-width 笔画宽度,可用用户坐标或者指定单位的方式指定。 笔画的宽度会相对坐标网格线居中。默认值为1 demo stroke-opacity 从0.0到1.0的数字。0.0是完全透明,1.0是完全不透明(默认值) demo stroke-dasharray 用一系列的数字来指定虚线和间隙的长度。 这些数字只能使用用户坐标,默认值为none demo stroke-linecap 线头尾的形状,值为butt(默认值)、round或square demo stroke-linejoin 图形的棱角或者一系列连线的状态, 取值为miter(尖的,默认值),round或者bevel(平的) demo stroke-miterlimit 相交处显示宽度与线宽的最大比例,默认值是4 demo 填充特性
属性 值 fill 填充颜色,默认值为black fill-opacity 从0.0到1.0的数字。0.0是完全透明,1.0是完全不透明(默认值) fill-rule 属性值为nonzero(默认值)或evenodd。 该属性决定判断某个点是否在图形内部的方法。 只有当边线交叉时或者内部有“洞”时才有效。
这里只介绍了该书的两个章节,它们是理解学习SVG的基础。接下来,我们将一起学习SVG里面常用的元素标签和坐标系统变换。
原文链接:http://codesnote.com/svg_tuto...
相关推荐
mapaler 2020-07-17
MIKUScallion 2020-07-05
Dickzeng 2020-07-05
wallowyou 2020-06-28
hermanncain 2020-06-25
mapaler 2020-06-21
Dickzeng 2020-06-17
程序员俱乐部 2020-06-11
lanzhusiyu 2020-06-09
hermanncain 2020-05-09
Elena0 2020-04-11
Leonwey 2020-04-11
wallowyou 2020-03-05
jinxiutong 2020-02-10
jinxiutong 2020-02-03
mqbeauty 2020-01-08
mapaler 2020-01-17
Elena0 2020-01-12
mapaler 2020-01-05