《SVG精髓》笔记（一）

warkiz 发布于2019-08-01 18:21 / 2731人阅读

摘要：本文是基于精髓一书的简单总结，文中的均为该书提供，目的是方便大家使用时快速查阅。允许指定一个给定的一组图形伸展以适应特定的容器元素。该属性的模型为指定轴和位置，由一个对齐方式和一个对齐方式组合而成。

本文是基于《SVG精髓》一书的简单总结，文中的demo均为该书提供，目的是方便大家使用时快速查阅。

1. 坐标系统

视口（viewport）：文档使用的画布区域，表示SVG可见区域的大小，通常可以在上使用 width 和 height 属性确定视口的大小。

viewBox：允许指定一个给定的一组图形伸展以适应特定的容器元素。这个属性值由4个数值组成，viewBox = ，分别代表想要叠加在视口上的用户坐标系统的最小x坐标、最小y坐标、宽度和高度。（可以理解为SVG内元素定位的真实坐标系统）

viewport宽高为4cm和5cm（画布区域），viewBox的左上角(0, 0)与viewport重合，宽度是64个单位（每个单位1/16cm），高度是80个单位（每个单位1/16cm）。矩形rect的坐标是相对viewBox来定位的（如果没有设置viewBox，默认坐标系统就是viewport）demo1

preserveAspectRatio：可以指定被缩放的图像相对视口的对齐方式，以及是希望它适配边缘还是要裁减。该属性的模型为:

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中的基本形状

形状	描述
	从起始点(start-x, start-y) 画一条线到 (end-x, end-y) demo
	画一个矩形，左上角位于(left-x, top-y)，宽高分别为width和height demo
	以指定半径radius画一个圆，圆心位于(center-x, center-y) demo
	画一个椭圆，x方向半径为x-radius，y方向半径为y-radius，圆心位于(center-x, center-y)
	画一个封闭图形，轮廓由points-list指定，它由一系列x/y坐标对组成。这些数值只能使用用户坐标，不可以添加长度单位。 demo
	画一系列相连的折线段，折线点由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...

私有云专线服务学习笔记一 javascript精髓基础java的精髓 SVG

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51668.html

《SVG精髓》笔记（二）

摘要：元素元素会将其所有子元素作为一个组合，通常组合还会有一个唯一的作为名称。变换描述按照指定的和值移动用户坐标系统。比例值可以是小数或则负数和相同按照指定的旋转用户坐标。旋转中心由和指定根据指定的倾斜所有坐标。 3. 文档结构在SVG中使用样式（四种方式，可以联想对照HTML样式方法）内联样式, 直接在标签里设置style属性内部样式表，可以同时为多个元素设置样式 de...

My_Oh_My 2019-08-01 18:21 评论0 收藏0
《SVG精髓》笔记（二）

摘要：元素元素会将其所有子元素作为一个组合，通常组合还会有一个唯一的作为名称。变换描述按照指定的和值移动用户坐标系统。比例值可以是小数或则负数和相同按照指定的旋转用户坐标。旋转中心由和指定根据指定的倾斜所有坐标。 3. 文档结构在SVG中使用样式（四种方式，可以联想对照HTML样式方法）内联样式, 直接在标签里设置style属性内部样式表，可以同时为多个元素设置样式 de...

entner 2019-08-29 14:11 评论0 收藏0
SVG 动画精髓

摘要：如图这种动画是怎么实现呢直接看代码吧这么多，是不是感觉有点懵逼。该值表示每个动画间使用自定的贝塞尔变换曲线。该值用来具体定义动画执行时的贝塞尔曲线。当然，里面的贝塞尔曲线组数为整个动画帧数。 TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。例如：路径动画 showImg(https://segmentf...

robin 2019-08-05 11:14 评论0 收藏0
SVG 动画精髓

摘要：如图这种动画是怎么实现呢直接看代码吧这么多，是不是感觉有点懵逼。该值表示每个动画间使用自定的贝塞尔变换曲线。该值用来具体定义动画执行时的贝塞尔曲线。当然，里面的贝塞尔曲线组数为整个动画帧数。 TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。例如：路径动画 showImg(https://segmentf...

whinc 2019-08-20 16:27 评论0 收藏0
读javascript语言精髓笔记

摘要：对象默认值填充对象属性不存在时，使用运算符填充属性不确定时避免报错当检索一个的值时，可以通过运算符来避免错误。例报错先检索是否为，后避免执行后面报错检测对象中是否存在该属性，不会查找该对象的原型链。对象默认值填充对象属性不存在时，使用||运算符填充：obj.name||lpp object属性不确定时避免报错当检索一个undefined的值时，可以通过 &&运算符来避免错误。例...

baukh789 2019-08-23 10:49 评论0 收藏0