├── .gitignore ├── 1.SVG教程.md ├── 10.SVG-circle元素.md ├── 11.SVG-ellipse元素.md ├── 12.SVG-line元素.md ├── 13.SVG-polyline元素.md ├── 14.SVG-polygon元素.md ├── 15.SVG-path元素.md ├── 16.SVG-marker元素.md ├── 17.SVG-text元素.md ├── 18.SVG-tspan元素.md ├── 19.SVG-tref元素.md ├── 2.SVG示例.md ├── 20.SVG-textpath元素.md ├── 21.SVG-switch元素.md ├── 22.SVG-image元素.md ├── 23.SVG-a元素.md ├── 24.SVG-defs元素.md ├── 25.SVG-symbol元素.md ├── 26.SVG-use元素.md ├── 27.SVG和CSS-级联样式表.md ├── 28.SVG轮廓.md ├── 29.SVG填充.md ├── 3.一个简单的SVG示例.md ├── 30.SVG视口和视图框.md ├── 31.SVG动画.md ├── 32.SVG脚本.md ├── 33.SVG变换.md ├── 34.SVG渐变.md ├── 35.SVG填充图案.md ├── 36.SVG剪裁路径.md ├── 37.SVG遮罩.md ├── 38.SVG滤镜.md ├── 4.在Web浏览器中显示SVG.md ├── 5.SVG图标.md ├── 6.SVG坐标系.md ├── 7.SVG-svg元素.md ├── 8.SVG-g元素.md ├── 9.SVG-rect元素.md ├── README.md ├── SUMMARY.md ├── assets ├── 2 │ ├── advanced_shapes.svg │ ├── animations.svg │ ├── basic_shapes.svg │ ├── gradients.svg │ ├── images.svg │ ├── layering_opacity.svg │ ├── links.svg │ ├── text.svg │ ├── transformations.svg │ └── use_cases.svg ├── 5 │ ├── svg-icons-circle-1.svg │ └── svg-icons-circle-2.svg ├── 37 │ └── mask.svg └── 38 │ └── filters-1.png ├── book.json ├── googleed52797467c24cfe.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | _book 3 | -------------------------------------------------------------------------------- /1.SVG教程.md: -------------------------------------------------------------------------------- 1 | # SVG教程 2 | *** 3 | ## SVG简介 4 | SVG（Scalable Vector Graphics）是可缩放矢量图形的缩写。它是一种图形格式，其中形状在XML中指定。而XML又由SVG查看器呈现。今天，大部分Web浏览器可以显示SVG，就像他们可以显示PNG，GIF和JPG一样。 5 | 6 | Internet Explorer 8（及更早版本）用户可能必须安装[Adobe SVG Viewer](http://www.adobe.com/svg/viewer/install/)才能在浏览器中查看SVG。 IE 9+，Chrome和Firefox原生都支持SVG。 7 | 8 | SVG是用于二维矢量图形。对于三维矢量图格式请参考X3D。 9 | 10 | 如果你不确定SVG是否适合你或你的项目，请快速查看[SVG示例](2.SVG示例.md)页面，以便快速了解SVG的功能。 11 | 12 | ## SVG视频教程 13 | 14 | 这里是这篇文章的视频版本： 15 | 16 | 17 | 18 | 在YouTube上有一个包含我的所有的[SVG视频的列表](https://www.youtube.com/playlist?list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO) 19 | 20 | ## SVG用于矢量图形 21 | 22 | 作为矢量图形格式，SVG对于绘制矢量类型图表示非常有用的，如： 23 | 24 | 1. 在X,Y坐标系中的二维图形 25 | 2. 柱形图，饼图等 26 | 3. 网页、平板电脑和手机app和webapp中可伸缩的图标和logo 27 | 4. 建筑和设计图 28 | 5. ... 29 | 30 | 作为“矢量图形”格式显示的形状被存储为矢量或者类矢量结构。换句话说，它们以数字形式存在，而不是像素。 31 | 32 | “可伸缩”意味着你可以随意放大缩小SVG图像，其不会出现失真的问题。这是可能的，因为图形的一些数字属性仅表示数字，而非像素。放大和缩小SVG图像只是相当于乘以或除以定义SVG形状的数字。 33 | 34 | SVG对于位图图形（如照片、电影等）是不理想的，尽管你也可以将位图图形嵌入SVG图片。不过，在位图图片上绘制图形或文字时，使用上述方法也很方便。 35 | 36 | ## SVG是生成的图像/图形/图表的理想选择 37 | 38 | 作为一种XML格式（一种文本格式），SVG很容易用Servlet，JSP，ASP.NET，PHP或其他Web应用程序技术生成。这使得SVG非常适合计算机生成的图形和图表。有趣的是，你经常需要在Web应用程序中生成完全适合SVG的图形类型（图形、图表、图等）。这也使得SVG更适合生成图形和图表。 39 | 40 | ## 引导SVG 41 | 42 | 可以通过JavaScript修改在浏览器中生成的SVG图像。所以，我们也可以使用SVG来做更多的动态演示，甚至开发一些小游戏（开发游戏可能[HTML5 Canvas](http://tutorials.jenkov.com/html5-canvas/index.html)更合适）。 43 | 44 | ## 关于这本教程 45 | 46 | 本教程的目的是让你能在短时间内使用SVG，并且能够使用教程作为快速参考。虽然我将尽可能覆盖更多的SVG知识，但是不会覆盖到SVG规范的每一个小部分。一旦你对基础知识有了一定的理解，你可以很容易地参考更高级或特殊情况主题的SVG规范。 47 | 48 | 本教程“正在进行中”，如果你希望收到新的内容的通知，可以订阅[RSS Feed](http://feeds.feedburner.com/jenkov-com) 49 | 50 | ## ScriptDraw.com 51 | 52 | 如果你想要尝试本教程中的一些示例或者使用SVG，我已经建了一个简单的在线SVG编辑器：ScriptDraw。你可以链接到[ScriptDraw.com](ScriptDraw.com) 53 | -------------------------------------------------------------------------------- /10.SVG-circle元素.md: -------------------------------------------------------------------------------- 1 | # SVG circle元素 2 | *** 3 | 4 | > 5 | * [SVG圆形视频](#svg圆形视频) 6 | * [圆形边框](#圆形边框) 7 | * [圆形填充](#圆形填充) 8 | 9 | SVG``元素被用来绘制圆形。简单示例如下： 10 | 11 | ```xml 12 | 18 | ``` 19 | 20 | 渲染后图片如下： 21 | 22 | 25 | 26 | 圆心在`cx`,`cy`处，半径为`r`。`cx`、`cy`和`r`都是``元素的属性。 27 | 28 | ## SVG圆形视频 29 | 30 | 如果你更喜欢看视频教程，可以观看下面的关于SVG圆形教程的YouTube视频： 31 | 32 | 33 | 34 | ## 圆形边框 35 | 36 | 你可以使用[SVG stroke样式属性](28.SVG轮廓.md)设置SVG圆形的边框。在本篇第一个例子中，圆形边框被设置为深绿色，颜色值为`#006600`。除了设置边框颜色外，你也可以使用[stroke-width样式属性](/28.SVG轮廓.html#stroke-width)设置边框的宽度。示例如下： 37 | 38 | ```xml 39 | 43 | ``` 44 | 45 | 渲染结果如下： 46 | 47 | 53 | 54 | 注意看，边框比第一个例子更宽了。 55 | 56 | 你也可以使用[stroke-dasharray属性](/28.SVG轮廓.html#stroke-dasharray-stroke-dashoffset)将边框虚线化。示例代码如下： 57 | 58 | ```xml 59 | 64 | ``` 65 | 66 | 渲染结果如下： 67 | 68 | 75 | 76 | 你也可以移除边框，只留下填充色： 77 | 78 | ```xml 79 | 82 | ``` 83 | 84 | 结果如下： 85 | 86 | 91 | 92 | ## 圆形填充 93 | 94 | [fill样式属性](29.SVG填充.md)决定了圆形被填充的样子。你可以将`fill`设置为`none`清除填充： 95 | 96 | ```xml 97 | 100 | ``` 101 | 102 | 无填充的圆形如下： 103 | 104 | 109 | 110 | 你也可以为`fill`属性设置填充颜色，如本文前面所述。代码如下： 111 | 112 | ```xml 113 | 116 | ``` 117 | 118 | 渲染结果如下： 119 | 120 | 125 | 126 | 你也可以使用[fill-opacity](/29.SVG填充.html#fill-opacity)样式属性将填充透明化。下面例子绘制了两个圆形，其中一个半透明的圆部分覆盖在另一个上面。 127 | 128 | ```xml 129 | 132 | 136 | ``` 137 | 138 | 渲染结果如下： 139 | 140 | 149 | 150 | 注意看，蓝色（右边）圆形现在是半透明的。要使其边框也是半透明的，不得不使用[stroke-opacity](/28.SVG轮廓.html#stroke-opacity)样式属性。 151 | -------------------------------------------------------------------------------- /11.SVG-ellipse元素.md: -------------------------------------------------------------------------------- 1 | # SVG ellipse元素 2 | *** 3 | 4 | > 5 | * [视频版](#视频版) 6 | * [SVG ellipse示例](#svg-ellipse示例) 7 | * [stroke-width](#stroke-width) 8 | * [stroke-dasharray](#stroke-dasharray) 9 | * [fill](#fill) 10 | * [fill-opacity](#fill-opacity) 11 | 12 | SVG``元素可以用来绘制椭圆。椭圆其实就是有不同高度和宽度的圆，即其在x和y方向上的半径不同。 13 | 14 | ## 视频版 15 | 16 | 如果你中意视频版教程，可以直接看下面的视频： 17 | 18 | 19 | 20 | ## SVG ellipse示例 21 | 22 | 下面是一个SVG ellipse例子： 23 | 24 | ```xml 25 | 32 | ``` 33 | 34 | 图片如下： 35 | 36 | 39 | 40 | 如圆形，椭圆的圆心在`cx`，`cy`。但是其在x和y方向上的半径有两个属性指定：`rx`和`ry`属性。如你所见，`rx`的属性值大于`ry`属性，使椭圆的宽大于高。如果将`rx`和`ry`属性设置为一样的值，会得到一个正常的圆形。 41 | 42 | ## stroke-width 43 | 44 | 你可以使用[stroke-width](/28.SVG轮廓.html#stroke-width)样式属性设置椭圆的边框宽度，示例代码如下： 45 | 46 | ```xml 47 | 52 | ``` 53 | 54 | 渲染结果如下： 55 | 56 | 62 | 63 | ## stroke-dasharray 64 | 65 | 你可以使用[stroke-dasharray](/28.SVG轮廓.html#stroke-dasharray-stroke-dashoffset)样式属性将椭圆边框变成虚线。示例如下： 66 | 67 | ```xml 68 | 74 | ``` 75 | 76 | 此示例中，将虚线的宽度设置为10，并将虚线之间的空间（虚线之间的空格）设置为5。渲染后的样子如下： 77 | 78 | 85 | 86 | ## stroke-opacity 87 | 88 | 你可以使用[stroke-opacity](/28.SVG轮廓.html#stroke-opacity)样式属性将SVG椭圆的边框半透明化。示例如下： 89 | 90 | ```xml 91 | 96 | 97 | 103 | ``` 104 | 105 | 这些SVG椭圆渲染如下： 106 | 107 | 119 | 120 | 注意看第二个（蓝色）椭圆是如何透明的，以及如果通过它的边框看到红色椭圆。 121 | 122 | ## fill 123 | 124 | `fill`样式属性用来为椭圆设置填充，示例如下： 125 | 126 | ```xml 127 | 132 | ``` 133 | 134 | 渲染结果如下： 135 | 136 | 142 | 143 | ## fill-opacity 144 | 145 | [fill-opacity](/29.SVG填充.html#fill-opacity)样式属性可以用来设置椭圆填充色的透明度，示例代码如下： 146 | 147 | ```xml 148 | 153 | 154 | 159 | ``` 160 | 161 | 渲染结果如下： 162 | 163 | 174 | 175 | 注意看，第二个（蓝色）椭圆是半透明的，透过它，我们能看到红色椭圆。 176 | -------------------------------------------------------------------------------- /12.SVG-line元素.md: -------------------------------------------------------------------------------- 1 | # SVG line元素 2 | *** 3 | 4 | > 5 | * [视频版教程](#视频版教程) 6 | * [SVG line示例](#svg-line示例) 7 | 8 | SVG``元素可以用来在SVG图片中绘制直线。 9 | 10 | ## 视频版教程 11 | 12 | 如果你喜欢看视频版教程，可以直接看下面的视频： 13 | 14 | 15 | 16 | ## SVG line示例 17 | 18 | 下面给出了一些简单的SVG直线示例： 19 | 20 | ```xml 21 | 29 | ``` 30 | 31 | 渲染图片结果如下： 32 | 33 | 39 | 40 | 直线的`起点`为x1和y1属性值所设置的点。 41 | 42 | 直线的`终点`为x2和y2属性值指定的点。 43 | 44 | `style`属性可以设置线条的颜色和粗细。在后面的章节中将会更详细地介绍样式属性。 45 | -------------------------------------------------------------------------------- /13.SVG-polyline元素.md: -------------------------------------------------------------------------------- 1 | # SVG polyline元素 2 | *** 3 | 4 | > 5 | * [SVG Polyline视频教程](#svg-polyline视频教程) 6 | * [SVG Polyline示例](#svg-polyline示例) 7 | 8 | 我们可以使用``元素绘制多条连接线（poly = multiple）。 9 | 10 | ## SVG Polyline视频教程 11 | 12 | 本节视频教程如下： 13 | 14 | 15 | 16 | ## SVG Polyline示例 17 | 18 | 下面是一个简单SVG折线示例： 19 | 20 | ```xml 21 | 27 | ``` 28 | 29 | 结果图片如下： 30 | 31 | 35 | 36 | 多条线是由多个点标识。每个点都是`points`属性中的x,y值。这个例子通过三个点定义了一个三角形。 37 | 38 | 这三个点通过直线连接，并被填充。默认的填充色为黑色。下面的例子指定了一个不同的填充色： 39 | 40 | ```xml 41 | 48 | ``` 49 | 50 | 53 | 54 | 你可能会发现，三角形中只有两条边有边框色（深绿色）。因为只有列出的点之间的线被绘制，并没有绘制回到第一个点的线。为了绘制这条线，需要将第一个点再加到`points`属性中，如下所示： 55 | 56 | ```xml 57 | 63 | ``` 64 | 65 | 69 | 70 | `style`属性设置了边框的颜色以及填充色。后面会对样式属性作详细介绍。 71 | -------------------------------------------------------------------------------- /14.SVG-polygon元素.md: -------------------------------------------------------------------------------- 1 | # SVG polygon元素 2 | *** 3 | 4 | > 5 | * [SVG Polygon教程视频版](#svg-polygon教程视频版) 6 | * [SVG Polygon示例](#svg-polygon示例) 7 | 8 | SVG``元素是用来绘制多边形（>=3）。 9 | 10 | ## SVG Polygon教程视频版 11 | 12 | 下面是本篇教程的视频版： 13 | 14 | 15 | 16 | ## SVG Polygon示例 17 | 18 | 这有一个简单的SVG多边形示例： 19 | 20 | ```xml 21 | 28 | ``` 29 | 30 | 渲染结果： 31 | 32 | 36 | 37 | 你可能会注意到，即使只列出了三个点，也绘制出了三条边。这是因为``元素绘制出了点之间的所有的直线，包括最后一个点到第一个点之间的直线。然而，``元素不会绘制最后一个点到第一个点之间的线。这也是``和``元素之间唯一的不同点。 38 | 39 | 下面是一个更大的例子——八边形（八角形？）: 40 | 41 | ```xml 42 | 50 | ``` 51 | 52 | 57 | -------------------------------------------------------------------------------- /15.SVG-path元素.md: -------------------------------------------------------------------------------- 1 | # SVG path元素 2 | *** 3 | 4 | > 5 | * [SVG Path教程视频版](#svg-path教程视频版) 6 | * [Path示例](#path示例) 7 | * [设置和移动画笔](#设置和移动画笔) 8 | * [线条](#线条) 9 | * [移动虚拟画笔绘图](#移动虚拟画笔绘图) 10 | * [弧线](#弧线) 11 | * [二次贝塞尔曲线](#二次贝塞尔曲线) 12 | * [三次贝塞尔曲线](#三次贝塞尔曲线) 13 | * [闭合路径](#闭合路径) 14 | * [组合命令](#组合命令) 15 | * [填充路径](#填充路径) 16 | * [标记](#标记) 17 | * [符号缩写](#符号缩写) 18 | * [路径命令](#路径命令) 19 | 20 | SVG``元素用于绘制组合线条、弧线、曲线等填充或非填充的高级形状。``元素可能是所有SVG形状中最高级功能最多的形状。它可能也是最难掌握的元素。 21 | 22 | ## SVG Path教程视频版 23 | 24 | 视频版教程如下： 25 | 26 | 27 | 28 | ## Path示例 29 | 30 | 让我们从一个简单的SVG``示例开始： 31 | 32 | ```xml 33 | 43 | ``` 44 | 45 | 下面是最终结果图片： 46 | 47 | 50 | 51 | 注意看图像如何包含一个圆弧和两条线段，已经第二条线如何不与第一个圆弧和线连接。 52 | 53 | ``元素的所有绘图都在`d`属性中指定。`d`属性包含绘制命令。上面的例子中，M发出“移至”命令，A发出“弧”命令，L发出“线段”命令。这些命令都作用在一个“虚拟画笔”。这支笔可以移动，绘制形状等。 54 | 55 | ## 设置和移动画笔 56 | 57 | ``元素的`d`属性中的第一个绘图命令应始终是移动命令。在你绘制任何东西之前，你都应该将虚拟画笔移动到某个位置。可以通过`M`命令做到这一点。示例代码如下： 58 | 59 | ```xml 60 | 66 | ``` 67 | 68 | 上述例子中，将虚拟画笔移动到了点50,50处。下一个绘制命令将从这个点开始。 69 | 70 | ## 线条 71 | 72 | 使用``元素绘制一条线可能是最简单的命令。绘制线条使用`L`和`l`（小写L）命令完成。示例如下： 73 | 74 | ```xml 75 | 82 | ``` 83 | 84 | 这个例子绘制了一条从点50,50（M命令的点）到点100,100（L命令的点）的线段。结果如下图： 85 | 86 | 90 | 91 | `L`和`l`命令之间的区别在于，大写版本（`L`）命令后跟的是一个绝对定位的点，而小写版本（`l`）命令后跟的是一个相对定位的点。相对点是虚拟画笔开始绘制线之前的点加上`l`命令后跟的坐标。 92 | 93 | 如果虚拟画笔定位在`50,50`点，并且你使用了`l100,100`命令，线段将绘制到点`50+100,50+100 = 150,150`。如果使用`L100,100`命令，线段将被精确地绘制到点`100,100`，而不会考虑虚拟画笔的位置。 94 | 95 | ## 移动虚拟画笔绘图 96 | 97 | 路径形状始终会从虚拟画笔的最后一个点绘制到一个新点。每一个绘制命令都带有一个终点。执行命令后，虚拟画笔将位于该绘图命令的结束点。下一个绘图命令将从该点开始。 98 | 99 | ## 弧线 100 | 101 | 对``元素使用`A`和`a`命令可以绘制圆弧。与线段一样，大写命令（`A`）对其终点使用绝对坐标，而小写名（`a`）使用相对坐标（相对于起点）。示例如下： 102 | 103 | ```xml 104 | 111 | ``` 112 | 113 | 结果图片如下： 114 | 115 | 119 | 120 | 这个例子绘制了一条从点`50,50`到点`100,100`（`A`命令最终指定）的圆弧。 121 | 122 | 圆弧的半径有`A`命令上的前两个参数指定。第一个参数是`rx`（x方向上的半径），第二个参数是`ry`（y方向上的半径）。将`rx`和`ry`设置为相同的值会生成一个圆形的圆弧。将`rx`和`ry`设置为不同的值会生成一个椭圆的圆弧。上面的例子中，`rx`被设置为`30`，`ry`被设置为`50`。 123 | 124 | `A`命令上的第三个参数是`x-axis-rotation`。这将设置相对于正常x轴旋转一定角度的弧的x轴。上面的例子中`x-axis-rotation`被设置为`0`。大部分情况下，你不需要改变这个参数。 125 | 126 | 第四和第五个参数分别是`large-arc-flag`和`sweep-flag`。`large-arc-flag`参数决定了绘制满足起点、终点、`rx`和`ry`的大圆弧还是小圆弧。下面一个例子中，绘制了4个圆弧，每个圆弧带有`large-arc-flag`和`sweep-flag`的不同组合： 127 | 128 | ```xml 129 | 131 | 132 | 134 | 135 | 137 | 138 | 140 | ``` 141 | 142 | 结果如下： 143 | 144 | 153 | 154 | 四个不同的圆弧都是从点`40,20`绘制到点`60,70`。一个长圆弧、一个小圆弧、以及它们两个的镜像。`large-arc-flag`决定了绘制大圆弧还是小圆弧。`sweep-flag`决定了圆弧是否为从起点到终点的镜像。其实，`sweep-flag`控制了圆弧绘制的方向（顺时针或逆时针），这就导致了“镜像”效果。 155 | 156 | 绘制的第一个圆弧是黄色弧。`large-arc-flag`被设置为0表示将绘制较小的弧。`sweep-flag`也被设置为0表示圆弧非镜像版。下面是一个黄色圆弧： 157 | 158 | 161 | 162 | 第二个圆弧是红色弧。`large-arc-flag`被设置为1表示绘制从点`40,20`到点`60,70`之间的两个可能的圆弧中较大的那个。下面将黄色和红色圆弧绘制在一起说明他们的区别： 163 | 164 | 169 | 170 | 绿色和蓝色圆弧（从前面例子中的所有四个圆弧看出）与黄色和红色圆弧相同，只是它们的`sweep-flag`被设置为1。这就意味着，它们将从起点到终点的轴上绘制镜像版的弧。 171 | 172 | ## 二次贝塞尔曲线 173 | 174 | 也可以使用``元素绘制二次贝塞尔曲线。可以通过`Q`和`q`命令完成绘制二次贝塞尔曲线。和线段一样，大写命令（`Q`）使用绝对坐标，小写命令（`q`）使用相对坐标（相对于起点）。下面是一个简单的二次曲线例子： 175 | 176 | ```xml 177 | 179 | ``` 180 | 181 | 结果图片如下： 182 | 183 | 186 | 187 | 该示例从点`50,50`到点`100,100`绘制了一条二次贝塞尔曲线，控制点为`50,200`。控制点是`Q`命令上设置的前两个参数。 188 | 189 | 控制点就像磁铁一样拉动曲线。曲线上的点越接近控制点，控制点拉入越多，意味着更接近控制点。下面是在图像上绘制控制点的更多示例： 190 | 191 | 201 | 202 | 事实上，如果你从起点到控制点绘制一条线，再从控制点到终点绘制另一条线，那么这两条线的中点之间的连线将是曲线的切线。如图所示： 203 | 204 | 211 | 212 | ## 三次贝塞尔曲线 213 | 214 | 使用`C`和`c`命令绘制三次贝塞尔曲线。三次贝塞尔曲线类似于二次贝塞尔曲线，但是它有两个控制点。和线段一样，大写命令（`C`）使用其终点的绝对坐标，而小写命令（`c`）使用相对坐标（相对于起始点）。示例代码如下： 215 | 216 | ```xml 217 | 219 | ``` 220 | 221 | 下面是绘制了控制点的图像： 222 | 223 | 229 | 230 | 你可以使用三次贝塞尔曲线创建高级曲线。如下图几个例子： 231 | 232 | 245 | 246 | ## 闭合路径 247 | 248 | ``元素具有可用于闭合路径的快捷命令，意味着绘制一条从终点到起点的线段。闭合命令为`Z`（或者`z`，闭合路径的大小写命令没有区别）。示例如下： 249 | 250 | ```xml 251 | 253 | ``` 254 | 255 | 下面是结果图片： 256 | 257 | 261 | 262 | ## 组合命令 263 | 264 | 你可以在同一个``元素中组合路径命令，代码如下： 265 | 266 | ```xml 267 | 273 | ``` 274 | 275 | 这个例子绘制了一条直线、一个圆弧、一条二次贝塞尔曲线，并绘制了一条返回起始点的直线来闭合路径。结果如下图： 276 | 277 | 280 | 281 | ## 填充路径 282 | 283 | 你可以使用CSS属性`fill`来填充路径，示例代码如下： 284 | 285 | ```xml 286 | 290 | ``` 291 | 292 | 结果如图所示： 293 | 294 | 297 | 298 | 可以发现图形内部用浅蓝色填充。 299 | 300 | ## 标记 301 | 302 | 你可以在``元素上使用标记。标记是位于路径的开始、中间和结束处的小符号，用来显示路径的方向。例如，在路径开始处的圆形或正方形，以及在结束处的箭头。 303 | 304 | 在[marker元素](16.SVG-marker元素.md)章节将会对标记作详细介绍。 305 | 306 | ## 符号缩写 307 | 308 | 如果你需要多次使用相同的命令，可以省略命令字母，仅仅需要提供一组额外的参数。示例如下： 309 | 310 | ```xml 311 | 313 | ``` 314 | 315 | 此例子演示了如何将其他参数传递给`l`命令，如同`l`位于每组参数前面一样。这也适用于其他路径命令。结果图片如下： 316 | 317 | 320 | 321 | ## 路径命令 322 | 323 | 下面是SVG`path`元素中可能的命令的一个列表。每个命令由一个字母和一组数字（坐标等）组成，它们是该命令的参数。大写命令通常将坐标参数解释为绝对坐标。小写命令通常将坐标参数解释为当前虚拟画笔的相对位置。 324 | 325 | |命令|参数 |名称 |描述 | 326 | |---|-----|-----|--------| 327 | |M |x,y |移至 |将虚拟画笔移动到指定点x,y处而不绘制图。 328 | |m |x,y |移至 |将虚拟画笔移动至相对于其当前坐标的x,y处而不进行绘图操作。 329 | |L |x,y |线路 |从虚拟画笔当前位置绘制一条到x,y点的直线。 330 | |l |x,y |线路 |从虚拟画笔当前位置绘制一条到相对于画笔当前位置的x,y点的直线。 331 | |H |x |水平线 |绘制一条到指定点（x坐标由参数指定，y坐标为虚拟画笔当前的纵坐标）的水平线。 332 | |h |x |水平线 |绘制一条到指定点（x坐标为虚拟画笔当前横坐标+指定的x，y坐标为虚拟画笔当前的纵坐标）的水平线。 333 | |V |y |垂直线 |绘制一条到指定点（x坐标为虚拟画笔当前横坐标，y坐标由参数指定）的垂直线。 334 | |v |y |垂直线 |绘制一条到指定点（x坐标为虚拟画笔当前横坐标，y坐标为虚拟画笔当前的纵坐标+参数指定的值）的垂直线。 335 | |C |x1,y1 x2,y2 x,y |曲线 |从画笔当前点到x,y点绘制一条三次贝塞尔曲线。x1,y1和x2,y2是曲线的开始和结束控制点，控制其如何弯曲。 336 | |c |x1,y1 x2,y2 x,y |曲线 |与C相同，但是坐标点为相对于画笔坐标的位置。 337 | |S |x2,y2 x,y |平滑曲线缩写 |从画笔位置到点x,y绘制一条三次贝塞尔曲线。x2,y2为结束控制点。开始控制点与前一条曲线的结束控制点相同。 338 | |s |x2,y2 x,y |平滑曲线缩写 |与S相同，但是坐标点为相对于画笔坐标的位置。 339 | |Q |x1,y1 x,y |二次贝塞尔曲线 |从画笔当前坐标到x,y点绘制一条二次贝塞尔曲线。x1,y1是控制曲线如何弯曲的控制点。 340 | |q |x1,y1 x,y |二次贝塞尔曲线 |与Q相同，但是坐标点为相对于画笔坐标的位置。 341 | |T |x,y |平滑二次贝塞尔曲线缩写 |从画笔位置到点x,y绘制一条三次贝塞尔曲线。控制点与所使用的的最后一个控制点相同。 342 | |t |x,y |平滑二次贝塞尔曲线缩写 |与T相同，但是坐标点为相对于画笔坐标的位置。 343 | |A |rx,ry x-axis-rotation large-arc-flag,sweepflag x,y |椭圆弧 |从当前点到x,y点绘制一条椭圆弧。rx和ry为椭圆在x和y方向上的半径。x-rotation确定圆弧围绕x轴旋转的角度。当rx和ry的值不同时，它才会有效果。large-arc-flag似乎没有被使用（可以为0或1）。值（0或1）都不会改变圆弧。 344 | |a |rx,ry x-axis-rotation large-arc-flag,sweepflag x,y |椭圆弧 |与A相同，但是坐标点为相对于画笔坐标的位置。 345 | |Z | |闭合路径 |通过从当前点到第一个点绘制一条线来关闭路径。 346 | |z | |闭合路径 |通过从当前点到第一个点绘制一条线来关闭路径。 347 | -------------------------------------------------------------------------------- /16.SVG-marker元素.md: -------------------------------------------------------------------------------- 1 | # SVG marker元素 2 | *** 3 | 4 | > 5 | * [Marker示例](#marker示例) 6 | * [定义Marker](#定义marker) 7 | * [自动定向](#自动定向) 8 | * [在Path中引用Marker](#在path中引用marker) 9 | * [在其它形状中引用Marker](#在其它形状中引用marker) 10 | * [Marker单位](#marker单位) 11 | 12 | SVG marker被用来标记线段或路径的开始、中间和结束。例如，你可以使用圆形或正方形标记作为路径的开始，并使用一个箭头标记路径的结束。 13 | 14 | ## Marker示例 15 | 16 | 这里是一个简单的标记的视觉效果： 17 | 18 | 34 | 35 | 可以通过``元素创建标记。``元素必须嵌套在``元素内。``元素内通常保存一组可重用的SVG图片定义。 36 | 37 | 下面是之前那个例子的代码： 38 | 39 | ```xml 40 | 41 | 42 | 43 | 44 | 45 | 47 | 48 | 49 | 50 | 51 | 57 | ``` 58 | 59 | 首先，请注意看内部带有两个``元素的``元素。两个``元素定义了之前图片中展示的开始和结束标记。 60 | 61 | 然后，注意``元素如何通过其`style`属性，并使用CSS属性`marker-start`和`marker-end`引用这两个``元素。这就是如何为一个给定路径指定标记的方法。我们稍后再看。 62 | 63 | ## 定义Marker 64 | 65 | 你可以使用``元素定义标记。示例代码如下： 66 | 67 | ```xml 68 | 69 | 70 | 71 | ``` 72 | 73 | 这个例子定义了一个宽度（`markerWidth="8"`）和高度（`markerHeight="8"`）都为8的标记。宽度和高度需要显示设置，因为标记是一个独立的图形元素。 74 | 75 | ``元素的`id`属性是用来在``元素中对其引用。 76 | 77 | 标记中的`refX`和`refY`坐标集被用作参考点。参考点是使用此标记的路径的开始位置。此例子中，`refX`和`refY`设置为圆的中心，意味着圆的中心将被放在路径的开始位置。如果未设置`refX`和`refY`，其默认为0，即标记的左上角会被放在路径的开始处。 78 | 79 | ``元素中是一个``元素。circle元素的圆心（`cx`和`cy`）在点`5,5`。中心点是标记虚拟框内的中心。它不在实际放置在图像中的位置。在``元素上使用`markerWidth`和`markerHeight`将虚拟框的大小设置为8,8。 80 | 81 | ## 自动定向 82 | 83 | 下面是另一个定义``的例子。此例子定义了用作路径箭头的三角形。 84 | 85 | ```xml 86 | 88 | 89 | 90 | ``` 91 | 92 | ``内部的``元素绘制了一个箭头指向右边的三角形。然而，如果路径不是一条水平线，你就需要旋转三角形来适应路径的方向。你可以将`orient`属性设置为`auto`来实现上述效果。``元素将会旋转其内部的图形，来适应引用它的路径。 93 | 94 | 下图展示了具有不同斜率的五条线，它们都使用了两个相同的标记作为起始和结束。注意标记是如何自动旋转以适应它们的线的斜率。 95 | 96 | 138 | 139 | 这就是将``元素中的`orient`属性设置为`auto`达到的效果。 140 | 141 | 你也可以将`orient`属性值设置为固定的角度（如45）。这将导致标记旋转指定的角度。然而，这并不如自动定向功能那么有用。 142 | 143 | ## 在Path中应用Marker 144 | 145 | 你可以在path上使用这些CSS属性引用标记： 146 | 147 | * marker-start 148 | * marker-mid 149 | * marker-end 150 | 151 | 这三个CSS属性分别为路径的开始、中间点和结束指定标记。 152 | 153 | 必须在``元素的`style`属性中使用这些CSS属性。你可以通过标记的`id`属性来引用它，就像下面这样： 154 | 155 | ```css 156 | marker-start: url(#markerId); 157 | ``` 158 | 159 | `markerId`由``元素的`id`属性值替换。 160 | 161 | 下面示例中使用了上述三个CSS属性： 162 | 163 | ```xml 164 | 165 | 167 | 168 | 169 | 170 | 172 | 173 | 174 | 175 | 176 | 184 | ``` 185 | 186 | 结果图片如下： 187 | 188 | 205 | 206 | ## 在其它形状中引用Marker 207 | 208 | ``元素不是SVG元素中唯一可以使用标记的元素。``、``和``元素也可以使用标记。它们和``引用标记的方式完全一样：在CSS属性`marker-start`、`marker-mid`和`marker-end`中引用``元素的`id`属性。 209 | 210 | ## 标记单位 211 | 212 | 标记的大小可以设置为适应路径边框宽度。这里有一个可视化的例子： 213 | 214 | 241 | 242 | 你可以将``元素的`makerUnits`设置为`strokeWidth`达到此效果。这实际上也是它的默认值，因此即使你未设置`markerUnits`属性，默认会达到此效果。SVG代码如下： 243 | 244 | ```xml 245 | 247 | 248 | 249 | ``` 250 | 251 | 要*避免*标记自动缩放以适应路径的边框宽度，请将`markerUnits`属性设置为`userSpaceOnUse`。这样，标记将保持其大小，而不管使用它的路径的边框宽度如何变化。 252 | -------------------------------------------------------------------------------- /17.SVG-text元素.md: -------------------------------------------------------------------------------- 1 | # SVG text元素 2 | *** 3 | 4 | > 5 | * [SVG text视频](#svg-text视频) 6 | * [Text示例](#text示例) 7 | * [Text定义](#text定义) 8 | * [定位文本](#定位文本) 9 | * [文本锚点](#文本锚点) 10 | * [文本描边和填充](#文本描边和填充) 11 | * [字母间距和字距](#字母间距和字距) 12 | * [单词间距](#单词间距) 13 | * [文本布局-无词包裹](#文本布局-无自动换行) 14 | * [旋转文本](#旋转文本) 15 | * [垂直文本](#垂直文本) 16 | * [文本方向](#文本方向) 17 | * [为文本添加样式](#为文本添加样式) 18 | * [文本长度](#文本长度) 19 | * [相关SVG元素](#相关svg元素) 20 | 21 | SVG``元素用来在SVG图片中绘制文本。 22 | 23 | ## SVG text视频 24 | 25 | 本篇教程的视频版如下： 26 | 27 | 28 | 29 | ## Text示例 30 | 31 | 下面是一个简单的示例： 32 | 33 | ```xml 34 | 39 | ``` 40 | 41 | 此例定义了一个位于x=10,y=40处的文本。文本内容是“Example SVG text 1”。 42 | 43 | 结果图片如下： 44 | 45 | 48 | 49 | ## Text定义 50 | 51 | 在深入了解SVG文本之前，最好先了解下面三个定义： 52 | 53 | * 字形 54 | 字形是字母或符号的视觉表现。因为字母“a”有许多不同的视觉表现，所以我们可以使用多个不同的字形来绘制。 55 | * 字体 56 | 字体是可以可视化一组字母和符号的字形集合。 57 | * 字符 58 | 字符是字母或符号的数字（二进制）表示。一个字符可能需要1个或多个字节来表示。当计算机渲染字符时，它将这些字符映射到字体中的字形。 59 | 60 | ## 定位文本 61 | 62 | 文本的**位置**由``元素的`x`和`y`属性确定。属性x确定了在哪里定位文本的左侧边缘（文本的开始）。属性y确定了在哪里定位文本的**底部**（而不是顶部）。因此，文本的y坐标和线段、长方形或其它图形的y坐标不一样。下面这个例子展示了y坐标都为40的文本和线段： 63 | 64 | ```xml 65 | 72 | ``` 73 | 74 | 注意：文本的y位置是指文本的底部，而不是顶部。 75 | 76 | ## 文本锚点 77 | 78 | 文本锚点决定了文本的那个部分位于`text`元素`x`属性指定的x位置。其默认为文本的左侧边缘。也就是文本的开头。当然，你也可以使用文本的中间或右侧边缘——文本的结尾作为锚点。 79 | 80 | 你可以通过改变CSS属性`text-anchor`设置文本的锚点。它有三个值：`start`，`middle`和`end`。下面是一个展示`text-anchor`三个不同文本锚点选项的SVG图： 81 | 82 | 94 | 95 | 垂直线展示了三个文本的X位置。所有三个文本的`x="50"`。你可以看到三个文本如何以不同的方式定位锚点。 96 | 97 | 上述三个文本的SVG代码如下所示： 98 | 99 | ```xml 100 | 102 | Start 103 | 104 | 106 | Middle 107 | 108 | 110 | End 111 | 112 | ``` 113 | 114 | ## 文本描边和填充 115 | 116 | 和其它图形一样，文本也可以设置描边和填充。如果你只指定描边，文本只会显示其轮廓。如果只指定填充，文本看起来像正常呈现。下面是三个展示`stroke`和`fill`组合的例子： 117 | 118 | 130 | 131 | 第一行文本只有填充。第二行只有描边。注意如何只绘制文本的轮廓。第三行包括描边和填充。注意如何将填充设置为灰色。 132 | 133 | 这里是上述图片的SVG代码： 134 | 135 | ```xml 136 | 138 | Fill only 139 | 140 | 142 | Stroke only 143 | 144 | 146 | Fill and stroke 147 | 148 | ``` 149 | 150 | 可以发现，为了更好的解释描边和填充的效果，我将`font-size`设置为`48px`。 151 | 152 | 当然，如果你想要更大的轮廓，也可以设置`stroke-width`属性。下面的例子将`stroke-width`设置为2： 153 | 154 | 165 | 166 | 你可以在[SVG stroke](28.SVG轮廓.md)章节阅读更多关于如何设置文本（以及任何其它SVG形状）的描边样式。 167 | 168 | 你也可以在[SVG fill](29.SVG填充.md)、[SVG渐变](34.SVG渐变.md)、[SVG填充图案](35.SVG填充图案.md)和[SVG遮罩](37.SVG遮罩.md)章节阅读更多关于如何填充文本。 169 | 170 | ## 字母间距和字距 171 | 172 | 使用样式属性`letter-spacing`和`kerning`可以控制字母间距和字距（字形间距）。我不知道哪个最好用。下面是两个简单的例子： 173 | 174 | ```xml 175 | 182 | ``` 183 | 184 | 结果图片如下： 185 | 186 | 191 | 192 | `letter-spacing`或`kerning`中使用的数值将被添加到正常的字母间距和字距。如果你使用负值，间距会缩小。 193 | 194 | ## 单词间距 195 | 196 | 你可以使用CSS属性`word-spacing`设置文本的词距。单词间距是文本中单词之前的空格数。示例如下： 197 | 198 | ```xml 199 | 200 | Word spacing is normal 201 | 202 | 204 | Word spacing is 4 205 | 206 | 208 | Word spacing is 8 209 | 210 | ``` 211 | 212 | 结果图片如下，注意：写作本文时，Firefox还不支持CSS属性`word-spacing`。 213 | 214 | 225 | 226 | `word-spacing`属性指定的数值被添加到正常的词距中。如果你使用值`normal`或省略`word-spacing`属性，不会有任何效果。如果你指定了一个负数值，词距会缩小。 227 | 228 | ## 文本布局-无自动换行 229 | 230 | SVG没有自动换行。你不得不自己定位文本并且换行。你可以从``元素的相对定位得到一些帮助。 231 | 232 | 你也可以沿着路径不布置文本，例如沿着圆形或样条。使用``元素可以完成。 233 | 234 | ## 旋转文本 235 | 236 | 可以像旋转其它SVG形状一样，旋转SVG文本。使用[SVG 变换](33.SVG变换.md)，示例如下： 237 | 238 | ```xml 239 | 247 | ``` 248 | 249 | 图片如下： 250 | 251 | 254 | 255 | 旋转由`transform`属性实现，在[SVG 变换](33.SVG变换.md)会对其作解释。 256 | 257 | ## 垂直文本 258 | 259 | 通过旋转文本可以展示垂直的文本，但是有另外一个方法展示垂直的文本。可以将CSS属性`writing-mode`设置为`tb`（从上到下）。写作的同时，Firefox（22）不支持此特性。 260 | 261 | 下面是一个SVG`writing-mode`示例： 262 | 263 | ```xml 264 | 265 | Vertical 266 | 267 | ``` 268 | 269 | 结果图片如下： 270 | 271 | 276 | 277 | 如果你想让字母不旋转，但是仍然垂直分布，你可以将CSS属性`glyph-orientation-vertical`设置为0。此属性设置了字形的旋转，默认为90。 278 | 279 | 下面是一些`glyph-orientation-vertical`的例子： 280 | 281 | ```xml 282 | 283 | Vertical 284 | 285 | 286 | Vertical 287 | 288 | ``` 289 | 290 | 结果图片如下： 291 | 292 | 300 | 301 | 你也可以使用CSS属性`letter-spacing`调整字母间距。下面两个例子带有不同`letter-spacing`： 302 | 303 | ```xml 304 | 305 | Vertical 306 | 307 | 309 | Vertical 310 | 311 | ``` 312 | 313 | 下面是结果图片，可以发现，`letter-spacing`设置为负值的文本在字形之间具有较小的垂直间距。 314 | 315 | 323 | 324 | ## 文本方向 325 | 326 | 你可以使用CSS属性`direction`设置文本渲染方向。`direction`属性有两个值：`ltr`和`rtl`。这些值分别表示“从左到右”和“从右到左”。你也必须将CSS属性`unicode-bidi`设置为`bidi-override`。 327 | 328 | 下面是SVG文本`direction`示例： 329 | 330 | ```xml 331 | 332 | Left to right 333 | 334 | ``` 335 | 336 | 此例子将CSS属性`direction`设置为`rtl`（从右到左）。结果图片如下： 337 | 338 | 343 | 344 | ## 为文本添加样式 345 | 346 | 下面是为文本设置样式的特定于文本的CSS属性。请记住，你也可以为文本的[stroke](28.SVG轮廓.md)和[fill](29.SVG填充.md)添加样式，也可以用[变换](33.SVG变换.md)，[图案](35.SVG填充图案.md)和[遮罩](37.SVG遮罩.md)为文本添加样式。 347 | 348 | 你必须像下表一样，用小写属性名，否则SVG查看器会忽略它们。 349 | 350 | | 属性 | 描述 | 351 | |-----------------|---------------------------------| 352 | | font-family | 使用的字体，如‘Arial’或‘Verdana’。| 353 | | font-size | 字体的大小，如‘12px’或‘24px’。| 354 | | kerning | 字母间距，如‘2’或‘3’（默认为1）。| 355 | | letter-spacing | 字母间距，如‘2’或‘3’，与kerning相同。| 356 | | word-spacing | 词距，如‘2’或‘3’。| 357 | | text-decoration | 可以为`none`，`underline`，`overline`和`line-through`中任何一个。| 358 | | stroke | 字体轮廓颜色。文本默认只有填充色没有描边。添加描边将会使字体变粗。| 359 | | stroke-width | 字体轮廓颜色的宽度| 360 | | fill | 字体的填充色| 361 | 362 | 下面是一个使用了上述某些属性的例子： 363 | 364 | ```xml 365 | 376 | ``` 377 | 378 | 386 | 387 | ## 文本长度 388 | 389 | 你可以使用``元素的`textLength`属性设置文本的长度。然后通过调整字符间距和字形的大小，使文本的长度适应指定大小。使用`lengthAdjust`属性，你可以指定是否应该调整字母间距和字形大小。 390 | 391 | 下面是三个使用了SVG`textLength`和`lengthAdjust`的例子： 392 | 393 | ```xml 394 | 395 | A long, long, long text. 396 | 397 | 398 | A long, long, long text. 399 | 400 | 401 | A long, long, long text. 402 | 403 | ``` 404 | 405 | 这是最终图像，注意最后两个文本上不同类型的间距。 406 | 407 | 418 | 419 | 写作本文时，Firefox还不支持这些属性。 420 | 421 | ## 相关SVG元素 422 | 423 | 以下SVG元素与``元素相关，这意味着它们也可以和文本一起使用（点击元素名称了解更多）： 424 | 425 | * [``](18.SVG-tspan元素.md) 426 | * [``](19.SVG-tref元素,md) 427 | * [``](20.SVG-textpath元素.md) 428 | -------------------------------------------------------------------------------- /18.SVG-tspan元素.md: -------------------------------------------------------------------------------- 1 | # SVG tspan元素 2 | *** 3 | 4 | > 5 | * [tspan示例](#tspan示例) 6 | * [垂直定位](#垂直定位) 7 | * [水平定位](#水平定位) 8 | * [为tspan元素添加样式](#为tspan元素添加样式) 9 | * [带基线偏移的上标和下标](#带基线偏移的上标和下标) 10 | 11 | SVG``元素用来绘制多行文本。``元素可以相对前一行文本定位，而不是必须绝对定位每行文本。用户还可以使用``元素一次选择并复制粘贴多行文本，而不仅仅是一个`text`元素。 12 | 13 | ## tspan示例 14 | 15 | 下面是一个简单的``示例： 16 | 17 | ```xml 18 | 26 | ``` 27 | 28 | 最终图片如下： 29 | 30 | 36 | 37 | 请注意``如何实现文本行相对于彼此定位的。 38 | 39 | ## 垂直定位 40 | 41 | 如果想让文本相对垂直定位，你可以使用`dy`属性（增量y）： 42 | 43 | ```xml 44 | 52 | ``` 53 | 54 | 现在，第二行文本在第一行文本下面10像素的位置，因为第二个``元素的`dy`属性被设置为“10”，最终图片如下： 55 | 56 | 62 | 63 | 如果想让``元素以一个绝对的y坐标定位，你可以像``元素一样使用`y`属性。 64 | 65 | 如果你在`dy`属性中写多个数值，每个数值将会应用到``元素文本的多个字符上。示例代码如下： 66 | 67 | ```xml 68 | 69 | 123 70 | 71 | ``` 72 | 73 | 最终图片如下。注意字形之间的垂直间距现在如何变化的。 74 | 75 | 80 | 81 | ## 水平定位 82 | 83 | 你可以使用`dx`属性（增量x）在x轴上将文本相对定位。下面的例子展示了将`dx`设置为30的效果。注意，第二行文本位于相对于第一行文本的**结尾**（不是开头）30像素的位置： 84 | 85 | ```xml 86 | 94 | ``` 95 | 96 | 最终图片如下： 97 | 98 | 104 | 105 | 如果你在`dx`属性中指定多个数值，每个数值将会应用到``元素中的每个字母上。示例如下： 106 | 107 | ```xml 108 | 109 | 123 110 | 111 | ``` 112 | 113 | 最终图片如下： 114 | 115 | 120 | 121 | 你也可以设置`x`属性来固定文本行的x坐标。如果要显示左对齐的多行文本的列表，这是非常有用的。下面的例子将三行文本的`x`属性都设置为10： 122 | 123 | ```xml 124 | 133 | ``` 134 | 135 | 最终图片如下： 136 | 137 | 144 | 145 | ## 为tspan元素添加样式 146 | 147 | 可以单独为``元素设置样式。因此你可以使用``元素为其设置不同于文本块中其它文本的样式。示例如下： 148 | 149 | ```xml 150 | 151 | Here is a bold word. 152 | 153 | ``` 154 | 155 | 最终图片如下： 156 | 157 | 162 | 163 | ## 带基线偏移的上标和下标 164 | 165 | 你可以``元素的CSS属性`baseline-shift`创建上标和下标。下面的SVG`baseline-shift`例子展示了实现方式： 166 | 167 | ```xml 168 | 169 | Here is a text with superscript 170 | and subscript mixed with normal 171 | text. 172 | 173 | ``` 174 | 175 | 最终图片如下。写作的同时，Firefox（v22）不支持这个属性。 176 | 177 | 184 | -------------------------------------------------------------------------------- /19.SVG-tref元素.md: -------------------------------------------------------------------------------- 1 | # SVG tref元素 2 | *** 3 | 4 | SVG``元素用来引用``元素中定义的文本。这样，你就可以在SVG图片中展示多个相同的文本，而不必包含多个文本。 5 | 6 | 示例代码如下： 7 | 8 | ```xml 9 | 23 | ``` 24 | 25 | 最终图片如下： 26 | 27 | 40 | 41 | 可以发现，（``元素中的）``元素有一个`id`属性。`id`属性值在``元素的`xlink:href`属性中引用。 42 | 43 | **注意**：原文中未提及一点，*Chrome暂时不支持此元素*，如果你使用Chrome打开此页面就会发现文本并未展示。 44 | -------------------------------------------------------------------------------- /2.SVG示例.md: -------------------------------------------------------------------------------- 1 | # SVG例子 2 | *** 3 | 本章包含一些SVG画的图片，来演示SVG的各种功能。我会让图片为自己代言。与此同时，每一个图片或图形下面的文字链接都解释了如何绘制出它，或者达到某个效果等等。 4 | 5 | * 基本图形 6 | 7 |

8 | 9 | * 高级形状（路径） 10 | 11 |

12 | 13 | * 文本 14 | 15 |

16 | 17 | * 图片 18 | 19 |

20 | 21 | * 分层+不透明度 22 | 23 |

24 | 25 | * 转换 26 | 27 |

28 | 29 | * 渐变 30 | 31 |

32 | 33 | * 链接 34 | 35 |

36 | 37 | * 动画 38 | 39 |

40 | 41 | * 用例 42 | 43 |

44 | -------------------------------------------------------------------------------- /20.SVG-textpath元素.md: -------------------------------------------------------------------------------- 1 | # SVG textpath元素 2 | *** 3 | 4 | SVG``元素用于沿着路径（例如圆上）布局文本。这看起来非常的酷。不同浏览器沿着路径呈现文本的方式有一点区别，因此请务必检查你的文本在你计划支持的所有浏览器中的效果。 5 | 6 | 示例如下： 7 | 8 | ```xml 9 | 28 | ``` 29 | 30 | 最终图片如下： 31 | 32 | 42 | 43 | 可以看到，（``元素内的）``元素有一个`id`属性。并且在``元素的`xlink:href`属性上对其引用。 44 | 45 | 如果路径比文本短，则仅绘制路径长度内的部分文本。 46 | 47 | 你还可以使用更高级的路径。下面是一个更复杂的文本路径示例： 48 | 49 | ```xml 50 | 51 | 53 | 54 | 55 | 56 | 57 | Text along a more advanced path with lines and curves. 58 | 59 | 60 | ``` 61 | 62 | 此例定义了一条由水平线、折线和曲线组成的文本路径。 63 | 64 | 最终图片如下： 65 | 66 | 77 | -------------------------------------------------------------------------------- /21.SVG-switch元素.md: -------------------------------------------------------------------------------- 1 | # SVG switch元素 2 | *** 3 | 4 | > 5 | * [Switch元素](#switch元素) 6 | 7 | SVG``元素用来在SVG图片上绘制文本。 8 | 9 | ## Switch元素 10 | 11 | ``元素可以根据用户使用的SVG查看器的语言展示不同的图形。通常，你可以使用``元素显示不同的文本，但也可以显示不同的形状。 12 | 13 | 下面是一个SVG``元素例子： 14 | 15 | ```xml 16 | 17 | 18 | UK English 19 | 20 | 21 | English 22 | 23 | 24 | Spanish 25 | 26 | 27 | ``` 28 | 29 | 根据用户选择的语言，展示``元素中相应的``元素。浏览器将使用第一次匹配的语言。单独的语言代码匹配也被认为是匹配的，所以通用语言（如`en`）之前放置方言（如`en-UK`）。最终图片如下： 30 | 31 | 44 | -------------------------------------------------------------------------------- /22.SVG-image元素.md: -------------------------------------------------------------------------------- 1 | # SVG image元素 2 | *** 3 | 4 | > 5 | * [SVG image视频](#svg-image视频) 6 | * [SVG image示例](#svg-image示例) 7 | 8 | 使用SVG``元素可以在SVG图片中嵌套位图图片。这样，你可以在上面或者旁边绘制位图图片。 9 | 10 | ## SVG image视频 11 | 12 | 下面是SVG`image`教程的视频版： 13 | 14 | 15 | 16 | ## SVG image示例 17 | 18 | 下面是一个SVG`image`示例： 19 | 20 | ```xml 21 | 32 | ``` 33 | 34 | 最终图片如下： 35 | 36 | 41 | 42 | 首先绘制了一个黑色矩形，然后在黑色矩形之上绘制了一张图片，后面的元素的都会绘制在之前元素的上面。 43 | 44 | 你也可以使用``元素嵌套其它SVG图片。所以，也不一定是位图图像。 45 | -------------------------------------------------------------------------------- /23.SVG-a元素.md: -------------------------------------------------------------------------------- 1 | # SVG a元素 2 | *** 3 | 4 | > 5 | * [图形作链接](图形作链接) 6 | 7 | SVG``元素用来在SVG图片中创建链接。SVG链接和HTML中的链接工作方式一样。下面是一些简单的例子： 8 | 9 | ```xml 10 | 38 | ``` 39 | 40 | 最终图片如下： 41 | 42 | 63 | 64 | 你可以将``元素上的`xlink:show`属性设置为`new`或`replace`，来告诉浏览器是在新窗口中打开链接还是替换当前窗口。 65 | 66 | 注意：如果你使用`replace`并且在`iframe`中显示SVG图片，`iframe`将是链接的目标，而不是浏览器窗口。如果你想让浏览器窗口替代`iframe`，可以将`target`属性的值改为`_top`。 67 | 68 | 你也可以设置`target`属性告诉浏览器在指定的框架或指定的窗口中打开链接。这就像HTML中链接的`target`属性一样（至少在理论上）。注意浏览器以不同的方式解释`target`属性。有关详细信息，请参阅本页最后一节。 69 | 70 | ## 图形作链接 71 | 72 | 也可以使用图形作为链接。你只需要将你希望链接的SVG图形放在``和``标签之间。下面的例子使用长方形代替文本作为链接： 73 | 74 | ```xml 75 | 84 | ``` 85 | 86 | 最终图片如下： 87 | 88 | 95 | -------------------------------------------------------------------------------- /24.SVG-defs元素.md: -------------------------------------------------------------------------------- 1 | # SVG defs元素 2 | *** 3 | 4 | > 5 | * [一个defs示例](#一个defs示例) 6 | * [defs元素内可以定义什么元素？](#defs元素内可以定义什么元素) 7 | 8 | SVG``元素中嵌套了在SVG图片中可重用的定义。例如，你可以将多个SVG图形组织在一起，将其当作一个可重用的图形。 9 | 10 | ## 一个defs示例 11 | 12 | 下面是一个简单的``元素例子： 13 | 14 | ```xml 15 | 23 | ``` 24 | 25 | 在``元素内定义的图形不会展示在SVG图片上。必须通过``元素来引用。示例如下： 26 | 27 | ```xml 28 | 40 | ``` 41 | 42 | 引用``元素前，必须设置其`id`属性。``元素通过`xlink:href`属性引用``元素。请注意属性值ID前面的`#`。 43 | 44 | ``元素通过`x`和`y`属性指定显示可重用图形的位置。请注意，``元素中的图形位于0,0处。这样做是因为它们的位置在``元素中指定。 45 | 46 | 最终图片如下： 47 | 48 | 63 | 64 | 蓝色点不是示例的部分。只是为了显示两个``元素的位置。 65 | 66 | ## defs元素内可以定义什么元素？ 67 | 68 | 你可以将下列元素放在``元素内： 69 | 70 | * 任何形状元素（`rect`，`line`等） 71 | * `g` 72 | * `symbol` 73 | -------------------------------------------------------------------------------- /25.SVG-symbol元素.md: -------------------------------------------------------------------------------- 1 | # SVG symbol元素 2 | *** 3 | 4 | > 5 | * [symbol示例](#symbol示例) 6 | * [preserveAspectRatio和viewBox](#preserveaspectratio和viewbox) 7 | 8 | SVG``元素用来定义可重用的标记。嵌套在``中的形状不会显示，除非其被``元素引用。 9 | 10 | ## symbol示例 11 | 12 | 下面是一个简单的标记示例： 13 | 14 | ```xml 15 | 22 | ``` 23 | 24 | ``元素需要一个`id`属性供后面的``元素引用。 25 | 26 | 33 | 34 | ## preserveAspectRatio和viewBox 35 | 36 | ``元素可以包含`preserveAspectRatio`和`viewBox`属性。然而``元素不能包含这两个属性。因此，相比在``元素中使用``元素，``元素可能是生成可重用图形的更好的方式。 37 | -------------------------------------------------------------------------------- /26.SVG-use元素.md: -------------------------------------------------------------------------------- 1 | # SVG use元素 2 | *** 3 | 4 | > 5 | * [use示例](#use示例) 6 | * [defs元素外使用图形](#defs元素外使用图形) 7 | * [设置CSS样式](#设置css样式) 8 | 9 | SVG``元素在SVG文档的任何位置复用图形，包括``元素和``元素。复用的图形可以被定义在``元素（使用前图形不可见）内或者外面。 10 | 11 | ## use示例 12 | 13 | 下面是一个简单的``元素示例： 14 | 15 | ```xml 16 | 28 | ``` 29 | 30 | 此例在``元素内部定义了一个``元素。这使得在被``元素引用之前，``元素都不可见。 31 | 32 | 在``元素可被引用前，必须通过`id`属性为其设置一个ID。``元素通过它的``属性引用``元素。注意在属性值ID前必须有一个`#` 33 | 34 | ``元素通过其`x`和`y`属性指定何处展示复用的图形。请注意，``元素中的图形位于0,0处。这么做是因为它们的位置由``元素指定。 35 | 36 | 最终图片如下： 37 | 38 | 52 | 53 | 蓝色点不是例子的一部分，只是为了显示两个``元素的x和y位置。 54 | 55 | ## defs元素外使用图形 56 | 57 | 只要图形有一个唯一的`id`属性，``元素可以在SVG图片中任何位置复用元素。示例如下： 58 | 59 | ```xml 60 | 69 | ``` 70 | 71 | 这个例子定义了一个内部包含``元素的``元素。然后通过``元素复用``元素（包含嵌套的``元素）。 72 | 73 | 最终图片如下： 74 | 75 | 86 | 87 | 可以发现，原始图形和复用版都显示出来了。发生这样的情况，是因为复用的图形（``元素）未定义在``元素或``元素内。因此其可见。 88 | 89 | 同样，蓝点表示``元素的坐标。 90 | 91 | ## 设置CSS样式 92 | 93 | 如果原始图形未设置CSS样式，你可以在复用其时设置CSS样式。你只需在``元素的`style`属性中指定样式。示例如下： 94 | 95 | ```xml 96 | 106 | ``` 107 | 108 | 注意，元素图形上没有`style`属性。所以其使用默认样式（经典黑）渲染。 109 | -------------------------------------------------------------------------------- /27.SVG和CSS-级联样式表.md: -------------------------------------------------------------------------------- 1 | # SVG和CSS-级联样式表 2 | *** 3 | 4 | > 5 | * [使用属性的CSS样式](#使用属性的css样式) 6 | * [使用style属性和CSS属性](#使用style属性和CSS属性) 7 | * [使用内联样式表](#使用内联样式表) 8 | * [class属性](#class属性) 9 | * [使用外联样式表](#使用外联样式表) 10 | * [在HTML页面使用样式表](#在html页面使用样式表) 11 | * [在图形中覆盖样式表](#在图形中覆盖样式表) 12 | * [SVG CSS属性](#svg-css属性) 13 | * [图形CSS属性](#图形css属性) 14 | * [文本CSS属性](#文本css属性) 15 | * [渐变CSS属性](#渐变css属性) 16 | 17 | 可以使用CSS为你的SVG图形添加样式。通过添加样式可以改变图形的样子。可以修改图形的描边颜色和宽度、填充色、不透明度和许多其它属性。 18 | 19 | 有六种方法可以为SVG图片中的图形添加样式。本章将会介绍它们。在本章结尾为你列出了在SVG中可以使用的CSS属性列表。 20 | 21 | 本章假设你已经熟悉CSS。如果你不了解，可以查看我写的[CSS教程](http://tutorials.jenkov.com/css/index.html)，它解释了HTML中使用的CSS。SVG元素上的CSS属性与HTML元素上的CSS属性有所不同，但总体原则保持不变。 22 | 23 | ## 使用属性的CSS样式 24 | 25 | 可以通过具体的样式属性（如`stroke`和`fill`）为SVG图形添加样式。示例如下： 26 | 27 | ```xml 28 | 29 | ``` 30 | 31 | 有一系列样式属性可供使用。但是，推荐你使用内联样式表或者外联样式表，所以我不会在这里深入太多关于样式属性的细节。 32 | 33 | ## 使用`style`属性和CSS属性 34 | 35 | 这种方法不会使用任何特定的样式属性，它只会使用`style`属性，并在其内指定CSS属性。如果你需要直接在图形中嵌套样式，并且你学习了CSS属性的名称，那么这种方法优于特定的属性。内联样式表和外联样式表的CSS属性相同，所以更容易复制粘贴。 36 | 37 | 下面的圆和上面的一样，但是其在`style`属性中设置了描边和填充： 38 | 39 | ```xml 40 | 41 | ``` 42 | 43 | ## 使用内联样式表 44 | 45 | 你也可以在内联样式表中为你的图形定义样式，并将这些样式自动应用到你的图形上。示例如下： 46 | 47 | ```xml 48 | 64 | 65 | 注意，圆形元素的样式定义在` 93 | 94 | 95 | 96 | 97 | ``` 98 | 99 | 可以发现，样式表中的`circle`选择器被添加了一个`.myGreen`和`.myRed`后缀。现在，``元素可以通过使用`class="myGreen"`或`class="myRed"`引用绿色或红色圆的样式。 100 | 101 | ## 使用外联样式表 102 | 103 | 当你使用外联样式表时，样式表被放在一个单独的文件中，并将其放到你Web服务中，就像HTML页面中外联样式文件。此外，你需要在你的SVG文件中的` 134 | 135 | 137 | 138 | 140 | 141 | 142 | 143 | ``` 144 | 145 | 为了给SVG图片中的图形添加样式，在`style`元素内添加常规CSS属性即可。你可以使用HTML中的CSS选择器为SVG元素添加样式。下面是一个通过HTML页面中的CSS样式表为页面中的`circle`元素添加样式的例子： 146 | 147 | ```html 148 | 149 | 150 | 151 | 157 | 158 | 161 | 162 | 163 | 164 | ``` 165 | 166 | 如果直接将SVG图片嵌套在HTML页面中，这可能是为SVG图形添加样式的最容易的方法。 167 | 168 | ## 在图形中覆盖样式 169 | 170 | 如果你在样式表中为图形设置了样式，也可以通过在图形上设置新的样式属性来覆盖之前的样式。形状内部设置的样式的优先级始终高于内联和外联样式表。 171 | 172 | ## SVG CSS属性 173 | 174 | SVG元素拥有下列CSS属性。不是所有的元素都包含所有的CSS属性。因此，针对不同元素，将CSS属性分开在多个表中。 175 | 176 | ### 图形CSS属性 177 | 178 | `path`元素和其它图形元素的CSS属性： 179 | 180 | |CSS属性 |描述 | 181 | |-------------------|-------------| 182 | |fill |设置图形填充色| 183 | |fill-opacity |设置图形的不透明度| 184 | |fill-rule |设置图形的填充规则| 185 | |marker |设置沿此形状边缘线的标记| 186 | |marker-start |设置起始标记| 187 | |marker-mid |设置中间段标记| 188 | |marker-end |设置结束标记| 189 | |stroke |设置图形的描边颜色| 190 | |stroke-dasharray |设置描边虚线和间隔长度| 191 | |stroke-dashoffset |设置虚线描边偏移| 192 | |stroke-linecap |设置描边线头样式，有效值为`round`，`butt`和`square`| 193 | |stroke-miterlimit |设置描边连接处长度| 194 | |stroke-opacity |设置描边的不透明度| 195 | |stroke-width |设置描边宽度| 196 | |text-rendering |设置文本渲染方式| 197 | 198 | ### 文本CSS属性 199 | 200 | `text`元素的CSS属性： 201 | 202 | |CSS属性 |描述 | 203 | |-----------------------------|----------------------------| 204 | |alignment-baseline |设置文本如何与`x`和`y`坐标对齐| 205 | |baseline-shift |设置用于呈现文本的基准线偏移| 206 | |dominant-baseline |设置显性基准线| 207 | |glyph-orientation-horizontal |设置水平字形方向| 208 | |glyph-orientation-vertical |设置垂直字形方向| 209 | |kerning |设置文本的字距（字距即字母间距）| 210 | 211 | ### 渐变CSS属性 212 | 213 | SVG渐变CSS属性： 214 | 215 | |CSS属性 |描述 | 216 | |-------------|-----------------------------------| 217 | |stop-color |设置渐变中使用的`stop`元素中的最终颜色| 218 | |stop-opacity |设置渐变中使用的`stop`元素中的最终不透明度| 219 | -------------------------------------------------------------------------------- /28.SVG轮廓.md: -------------------------------------------------------------------------------- 1 | # SVG轮廓 2 | *** 3 | 4 | > 5 | * [样式属性](#样式属性) 6 | * [轮廓示例](#轮廓示例) 7 | * [轮廓和填充示例](#轮廓和填充示例) 8 | * [stroke-width](#stroke-width) 9 | * [stroke-linecap](#stroke-linecap) 10 | * [stroke-linejoin](#stroke-linejoin) 11 | * [stroke-miterlimit](#stroke-miterlimit) 12 | * [stroke-dasharray + stroke-dashoffset](#stroke-dasharray-stroke-dashoffset) 13 | * [stroke-opacity](#stroke-opacity) 14 | 15 | SVG图形的stroke定义了其轮廓。stroke是SVG图形基本的[SVG CSS属性](27.SVG和CSS-级联样式表.md)之一。 16 | 17 | ## 样式属性 18 | 19 | CSS属性`stroke`和`fill`可以在SVG图形的`style`属性内指定。示例如下： 20 | 21 | ```xml 22 | 24 | ``` 25 | 26 | 这个例子定义了一个深蓝色边框和浅蓝色填充的圆。 27 | 28 | ## 轮廓示例 29 | 30 | SVG图形的stroke是其轮廓。下面是一个SVG轮廓例子： 31 | 32 | ```xml 33 | 35 | ``` 36 | 37 | 此例定义了一个黑色轮廓无填充的圆。最终图片如下： 38 | 39 | 43 | 44 | ## 轮廓和填充示例 45 | 46 | 你可以组合SVG图形的轮廓和填充色。下面是一个组合例子： 47 | 48 | ```xml 49 | 51 | ``` 52 | 53 | 这个例子定义了一个深蓝色（`#000066`）轮廓和浅蓝色（#3333ff）填充的圆。最终图片如下： 54 | 55 | 59 | 60 | ## stroke-width 61 | 62 | SVG有一个CSS属性——`stroke-width`，其定义了轮廓的宽度。SVG`stroke-width`示例如下： 63 | 64 | ```css 65 | stroke-width: 3px; 66 | ``` 67 | 68 | 这个例子将轮廓宽度设置为3像素。除了像素之外，你也可以使用别的单位。在[SVG坐标系单位](/6.SVG坐标系.html#坐标系单位)中能看到所有可用单位。 69 | 70 | 下面四个例子拥有不同`stroke-width`： 71 | 72 | ```xml 73 | 76 | 77 | 80 | 81 | 84 | 85 | 88 | ``` 89 | 90 | 最终图片如下： 91 | 92 | 110 | 111 | ## stroke-linecap 112 | 113 | SVG CSS属性`stroke-linecap`定义了SVG线段结尾处的渲染方式。它有三个不同的值，如下所示： 114 | 115 | ``` 116 | butt 117 | square 118 | round 119 | ``` 120 | 121 | `butt`值导致线段结尾处截断的线头。`square`值的线头和`butt`一样，但是其会超过线段结尾一点。`round`值结尾是圆弧线头。 122 | 123 | 下面三个SVG`stroke-linecap`例子解释了这三个值（顺序为`butt`，`square`，`round`）。 124 | 125 | 146 | 147 | 为了更好的展示CSS属性`stroke-linecap`的效果，这个例子定义了个三条绿色线段。在每条绿线中绘制了一条`stroke-width`为1的黑色线段。它们和绿线有相同的`x1,y1`和`x2,y2`坐标，但是没有为其设置`stroke-linecap`。这么做，你就能看出`stroke-linecap`属性值之间的不同。 148 | 149 | ## stroke-linejoin 150 | 151 | CSS属性`stroke-linejoin`定义如何渲染形状中两条线之间的连接。CSS属性`stroke-linejoin`可以采用下列三个值之一： 152 | 153 | ``` 154 | miter 155 | round 156 | bevel 157 | ``` 158 | 159 | 下面的例子解释了`stroke-linejoin`不同值的效果： 160 | 161 | ```xml 162 | 166 | miter 167 | 168 | 172 | round 173 | 174 | 178 | bevel 179 | ``` 180 | 181 | 198 | 199 | ## stroke-miterlimit 200 | 201 | CSS属性`stroke-miterlimit`和`stroke-linejoin`一起使用。如果`stroke-linejoin`设置为miter，`stroke-miterlimit`可以用来限制两条线相交的点之间的距离，线连接（角）的延伸。 202 | 203 | ```xml 204 | 210 | 1.0 211 | 217 | 2.0 218 | 224 | 4.0 225 | ``` 226 | 227 | 注意，为了让三条路径看起来不同，将它们的`stroke-miterlimit`设置为不同的值。最终图片如下： 228 | 229 | 250 | 251 | 连接线的长度也叫斜角长度。斜角长度是从连接线的内角到连接线的顶端之间的长度。下面这张图片中，在连接线的上方用红色线绘制出了连接线的长度： 252 | 253 | 269 | 270 | 正如你所想，描边越宽，连接线之间的角度越尖锐，斜角越长。 271 | 272 | 实际上，`stroke-miterlimit`设置了斜角长度和描边宽度的比率限制。因此，`stroke-miterlimit`设置为1.0表示斜角长度最大为1*描边宽度。超过部分就会被截断。1.0是`stroke-miterlimit`最小的可能值。 273 | 274 | 下面一些连接线例子使用不同角度，并且`stroke-miterlimit`都为`1.0`。 275 | 276 | 294 | 295 | 注意，当角度越大，被截断的斜角部分越大。这是因为更尖锐的角度自然地产生更长的斜角。 296 | 297 | ## stroke-dasharray + stroke-dashoffset 298 | 299 | CSS属性`stroke-dasharray`用于使用虚线呈现SVG形状的描边。它被称为`dash数组`的原因是你需要提供一个数字数组作为其值。值定义破折号和空格的长度。因此，你应该提供偶数个数字。 300 | 301 | 下面是一个SVG`stroke-dasharray`例子： 302 | 303 | ```xml 304 | 308 | ``` 309 | 310 | 这个例子定义了一个描边，其中虚线部分宽为10像素，虚线之间的间隔为5像素。最终图片如下： 311 | 312 | ```xml 313 | 320 | ``` 321 | 322 | 下面一些例子带有不同的虚线和空格宽度： 323 | 324 | ```xml 325 | 329 | 330 | 334 | ``` 335 | 336 | 第一条线由宽度10的虚线开始，紧跟一个宽度5的空格，然后是一个5像素的虚线，然后又一个5像素的空格，最终重复该模式。 337 | 338 | 第二条线由宽度10的虚线开始，紧跟一个5像素的空格和一个5像素的虚线，最终是一个10像素的空格。 339 | 340 | 最终图片如下： 341 | 342 | ```xml 343 | 354 | ``` 355 | 356 | `stroke-dashoffset`用于设置虚线模式中的开始点。例如，你可以从模式的一般开始，然后从那开始重复模式。下面是一个SVG`stroke-dashoffset`例子； 357 | 358 | ```xml 359 | 365 | ``` 366 | 367 | 此例将`stroke-dashoffset`设置为5像素，意味着从dash模式的5像素位置开始呈现（然而不是所有浏览器都完全支持）。最终图片如下： 368 | 369 | 376 | 377 | ## stroke-opacity 378 | 379 | CSS属性`stroke-opacity`用来定义SVG图形描边的不透明度。其为0和1之间的一个小数。值越接近0，描边越透明。值越接近1，描边越不透明。`stroke-opacity`默认值为1，表示描边完全不透明。 380 | 381 | 下面例子在文本上展示了三条带有不同`stroke-opacity`的线： 382 | 383 | ```xml 384 | Text Behind Shape 385 | 386 | 391 | 392 | 397 | 398 | 403 | ``` 404 | 405 | 最终图片如下，透过不同的线，文本越来越不可见。 406 | 407 | 425 | -------------------------------------------------------------------------------- /29.SVG填充.md: -------------------------------------------------------------------------------- 1 | # SVG填充 2 | *** 3 | 4 | > 5 | * [填充示例](#填充示例) 6 | * [填充和描边示例](#填充和描边示例) 7 | * [fill-opacity](#fill-opacity) 8 | * [fill-rule](#fill-rule) 9 | 10 | SVG图形的fill定义了其轮廓内部的颜色。换句话说就是SVG形状的表面。fill是你可以为任何SVG图形设置的基础[CSS属性](27.SVG和CSS-级联样式表.md)之一。 11 | 12 | ## 填充示例 13 | 14 | SVG形状的fill是在形状轮廓内的填充。下面是一个SVG填充的示例： 15 | 16 | ```xml 17 | 19 | ``` 20 | 21 | 这个例子定义了一个填充色为蓝色（`#0000ff`）无描边的圆。最终图片如下： 22 | 23 | 27 | 28 | ## 填充和描边示例 29 | 30 | 你可以在SVG图形上组合使用描边和填充色。示例如下： 31 | 32 | ```xml 33 | 35 | ``` 36 | 37 | 这个例子定义了一个描边为深蓝色（`#000066`）填充为浅蓝色（`#3333ff`）的圆，最终图片如下： 38 | 39 | 43 | 44 | ## fill-opacity 45 | 46 | SVG CSS属性`fill-opacity`用来设置图形填充色的不透明度。其值为0和1之间的小数。值越接近0，填充越透明。值越接近1，填充越不透明。`fill-opacity`默认为1，表示填充色完全不透明。 47 | 48 | 下面例子中包含两个带有不同`fill-opacity`值的圆： 49 | 50 | ```xml 51 | Text Behind Shape 52 | 53 | 56 | 59 | ``` 60 | 61 | 最终图片如下： 62 | 63 | 72 | 73 | 注意右边的圆后面的文本比左边的可见性小。这是因为右边圆的`fill-opacity`值比左边的大。 74 | 75 | ## fill-rule 76 | 77 | `fill-rule`确定了如何填充复杂图形。`fill-rule`可以采用两种不同的值，如下： 78 | 79 | ``` 80 | nonzero 81 | evenodd 82 | ``` 83 | 84 | 通常，这两个值用于确定形状内部和外部的规则。只有内部是填充。对于一个圆，这很简单，但对于更复杂的形状，这并不是那么容易。请看这个``例子： 85 | 86 | ```xml 87 | 93 | 94 | 99 | ``` 100 | 101 | 这两个路径例子都由8条线绘制的菱形组成，在较大菱形内部还有一个小的菱形。左边的路径中，内部菱形从左向右（顺时针）。右边的路径中，内部菱形从右向左（逆时针）。下面是使用`fill-rule: nonzero`的最终图片： 102 | 103 | 115 | 116 | 正如你所见，`nonzero`规则依据内部菱形的绘制方向确定内部菱形在形状的内部还是外部。用于确定点是在形状内部还是外部的`nonzero`规则： 117 | 118 | 从一个点往任何方向上绘制一条直线（射线）。形状中的路径每次穿过此射线时，如果路径从左到右穿过射线，则计数器加1，如果路径从右到左穿过射线，则计数器减1。如果穿过射线的所有路径都计数完，并且计数器为0，则该点被认为在路径外。如果计数器非0，则该点被认为在路径内。 119 | 120 | 下面是两个使用同样的`fill-rule: evenodd`的路径例子： 121 | 122 | ```xml 123 | 128 | 129 | 134 | ``` 135 | 136 | 最终图片如下： 137 | 138 | 151 | 152 | 用于确定点是在形状内部还是外部的`evenodd`规则： 153 | 154 | 从一个点往任何方向上绘制一条直线（射线）。每次路径穿过射线，计数器加1。如果总数是偶数，则点在外部。如果总计数为奇数，点在形状内。 155 | -------------------------------------------------------------------------------- /3.一个简单的SVG示例.md: -------------------------------------------------------------------------------- 1 | # 一个简单的SVG示例 2 | *** 3 | SVG图片可以非常简单，也可以非常复杂。下面是一个简单的例子： 4 | 5 | ```xml 6 | 11 | ``` 12 | 正如你看到的，这个例子代码是纯XML。 13 | 14 | 这个例子画了一个宽100像素高100像素的矩形。边框颜色（矩形轮廓）是HTML颜色值`#ff0000`。填充色为`#0000ff`。 15 | 16 | SVG图片结果如下： 17 | 18 | 23 | -------------------------------------------------------------------------------- /30.SVG视口和视图框.md: -------------------------------------------------------------------------------- 1 | # SVG视口和视图框 2 | *** 3 | 4 | > 5 | * [视口](#视口) 6 | * [坐标系单位](#坐标系单位) 7 | * [视图框](#视图框) 8 | * [保留宽高比](#保留宽高比) 9 | * [视图框对齐](#视图框对齐) 10 | 11 | SVG图片的视口和视图框设置了图片可见部分的尺寸。 12 | 13 | ## 视口 14 | 15 | 视口就是SVG图片的可视区域。SVG图像可以逻辑上与你想要的一样宽和高，但同一时间图像的某一部分是可见的。可见区域就被叫作视口。 16 | 17 | 你可以通过在`
184 | 185 | 186 |
187 | 188 | 这里是生成上面动画所需的代码： 189 | 190 | ```html 191 | 195 | 196 | 222 |
223 | 224 | 225 | ``` 226 | 227 | 两个HTML按钮都有一个`onclick`监听器。这些监听器调用开始和停止动画的`startAnimation()`和`stopAnimation()`函数。通过设置一个每20毫秒调用`animate()`函数的定时器来启动动画。再通过清除定时器来停止动画。 228 | 229 | 动画在`animate()`函数内部执行。首先，通过`document.getElementById()`函数获取对SVG图像中``元素的引用。然后读取院的`cx`属性，并将其转换为数值。然后将`cx`加2。如果新的x值大于500，就将其重置为20。最后，将``元素的`cx`属性设置为新的x值。该圆因此被移动到新的x位置。 230 | -------------------------------------------------------------------------------- /33.SVG变换.md: -------------------------------------------------------------------------------- 1 | # SVG变换 2 | *** 3 | 4 | > 5 | * [变换示例](#变换示例) 6 | * [什么元素可以被变换？](#什么元素可以被变换) 7 | * [变换函数](#变换函数) 8 | * [translate](#translate) 9 | * [rotate](#rotate) 10 | * [scale](#scale) 11 | * [skew](#skew) 12 | * [matrix](#matrix) 13 | * [组合变换](#组合变换) 14 | 15 | 可以为SVG图像中的形状添加变换。例如移动、缩放和旋转形状。这是显示垂直或对角线文本的一种方便的方法。 16 | 17 | ## 变换示例 18 | 19 | 这里是一个简单的例子： 20 | 21 | ```xml 22 | 34 | ``` 35 | 36 | 最终图片如下： 37 | 38 | 43 | 44 | 请注意``和``元素的`transform`属性。`transform`属性指定要应用于形状的变换。此例中，应用了移位和旋转。本文后面将作解释。 45 | 46 | ## 什么元素可以被转换？ 47 | 48 | 你可以对所有SVG形状作变换。你也可以将变换应用到``元素，因此，能够有效地转换一组元素。也可以变换渐变和填充图案。 49 | 50 | ## 变换函数 51 | 52 | SVG提供了五个变换函数： 53 | 54 | * translate() 55 | * rotate() 56 | * scale() 57 | * skew() 58 | * matrix() 59 | 60 | 接下来将对每个函数作详细解释。 61 | 62 | 实际上，变换函数不会变换SVG形状本身，而是变换该形状的基础坐标系。因此，即使宽度为20的形状被放大两倍显示，逻辑上它的宽度仍然是20。 63 | 64 | ## translate 65 | 66 | `translate()`函数可以移动形状。你可以将`x`和`y`作为参数传递给`translate()`函数。示例代码如下： 67 | 68 | ``` 69 | translate(50, 25) 70 | ``` 71 | 72 | 这个例子将形状沿x轴移动50个单位，沿y轴移动25个单位。 73 | 74 | 下面例子展示了两个相同的位置和大小的形状，其中有一个包含位移变换： 75 | 76 | ```xml 77 | 79 | 80 | 83 | ``` 84 | 85 | 最终图片如下： 86 | 87 | 93 | 94 | 请注意，与第一个（红色）形状相比，第二个（蓝色）形状沿x轴移动75个单位，沿y轴移动25个单位。 95 | 96 | ## rotate 97 | 98 | `rotate()`函数绕点`0,0`旋转形状。下面例子显示了一个矩形（轮廓）和旋转15度后的全等矩形（填充）： 99 | 100 | ```xml 101 | 104 | 105 | 109 | ``` 110 | 111 | 最终图片如下： 112 | 113 | 119 | 120 | 如果你想使形状绕另一个点（而非0,0点）旋转，可以将点的x和y坐标传递给`rotate`函数。下面的例子展示了一个非旋转矩形（轮廓）和围绕其自己的中心旋转15度的全等（填充）矩形： 121 | 122 | ```xml 123 | 126 | 127 | 131 | ``` 132 | 133 | 最终图片如下： 134 | 135 | 140 | 141 | 所有旋转变换都是沿顺时针方向旋转0到360之间的一个度数。如果想沿逆时针方向旋转，你可以传递一个负角度给`rotate()`函数。 142 | 143 | ## scale 144 | 145 | `scale()`函数用来放大和缩小形状。`scale()`函数缩放形状尺寸及其位置坐标。因此，位于10,10处宽度为20，高度为30的矩形，放大两倍后，其将出现在20,20处，宽度为40，高度为60。 146 | 147 | `scale()`函数也会缩放形状的描边宽度。 148 | 149 | 下面的例子展示了一个位于10,0处，宽度为20，高度为20的矩形（蓝色）和一个以2为缩放系数的全等矩形（黑色）： 150 | 151 | ```xml 152 | 154 | 155 | 158 | ``` 159 | 160 | 最终图片如下： 161 | 162 | 166 | 167 | 注意矩形的位置和大小是如何缩放的。 168 | 169 | 你也可以传递两个参数给`scale()`函数来为矩形在x轴和y轴上使用不同的缩放系数。如下所示： 170 | 171 | ``` 172 | scale(2, 3) 173 | ``` 174 | 175 | 该示例将形状沿x轴缩放2倍，沿y轴缩放3倍，示例如下： 176 | 177 | ```xml 178 | 180 | 181 | 184 | ``` 185 | 186 | 最终图片如下： 187 | 188 | 193 | 194 | 请注意，被缩放的矩形（黑色）的描边宽度同样也被缩放，并且在x轴和y轴上缩放不同。 195 | 196 | ### 作为镜像函数的缩放 197 | 198 | 通过沿x轴或y轴缩放-1，你可以将`scale()`函数用作镜像函数。在这么做之前，你首先必须沿x或y方向移动（translate）形状，否则镜像形状将出现在SVG画布外面。 199 | 200 | 示例如下： 201 | 202 | ```xml 203 | 205 | 206 | 209 | ``` 210 | 211 | 最终图像中在x=100处绘制了一条线（因为矩形在x方向上平移100）。 212 | 213 | 220 | 221 | 蓝色是原始形状，黑色是平移和缩放之后的形状。 222 | 223 | ## skew 224 | 225 | `skewX()`和`skewY()`函数使x轴和y轴倾斜。实际上，函数根据某个指定的角度偏斜给定的轴。 226 | 227 | 下面是一些为`skewX()`指定不同值的矩形： 228 | 229 | ```xml 230 | 232 | 233 | 236 | 239 | 242 | ``` 243 | 244 | 最终图片如下： 245 | 246 | 252 | 253 | 如你所见，`skewX()`函数使垂直线看起来旋转了给定角度。因此，`skewY()`函数是水平线看起来像被旋转给定角度。这里有几个例子： 254 | 255 | ```xml 256 | 258 | 259 | 262 | 265 | 268 | ``` 269 | 270 | 276 | 277 | ## matrix 278 | 279 | 也可以将变换表示为矩阵。矩阵如下所示： 280 | 281 | ``` 282 | a c e 283 | b d f 284 | 0 0 1 285 | ``` 286 | 287 | 由于只能指定前6个值，因此只能为矩阵变换函数提供6个值。示例代码如下： 288 | 289 | ``` 290 | transform="matrix(a,b,c,d,e,f)" 291 | ``` 292 | 293 | 其它变换也可以表示为矩阵。这里有些例子： 294 | 295 | ``` 296 | Translate 297 | 298 | 1 0 tx 299 | 0 1 ty 300 | 0 0 1 301 | 302 | matrix(1,0,0,1,tx,ty) 303 | ``` 304 | 305 | ``` 306 | Rotate 307 | 308 | cos(a) -sin(a) 0 309 | sin(a) cos(a) 0 310 | 0 0 1 311 | 312 | matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0) 313 | ``` 314 | 315 | 注意：`cos(a)`和`sin(a)`的值必须在被插入矩阵之前被预先计算。参数`a`是旋转的角度。 316 | 317 | ``` 318 | Scale 319 | 320 | sx 0 0 321 | 0 sy 0 322 | 0 0 1 323 | 324 | matrix(sx, 0, 0, sy, 0, 0) 325 | 326 | ``` 327 | 328 | 沿x轴的偏斜变换可以写成： 329 | 330 | ``` 331 | Skew 332 | 333 | 1 tan(a) 0 334 | 0 1 0 335 | 0 0 1 336 | 337 | matrix(1,0,tan(a),1,0,0) 338 | ``` 339 | 340 | `tan(a)`的值必须在插入到`matrix()`函数前进行预先计算。 341 | 342 | 沿y轴的偏斜变换可以写成： 343 | 344 | ``` 345 | Skew 346 | 347 | 1 0 0 348 | tan(a) 1 0 349 | 0 0 1 350 | 351 | matrix(1,tan(a),0,1,0,0) 352 | ``` 353 | 354 | 下面是一个模仿简单的位移函数的SVG矩阵变换示例： 355 | 356 | ```xml 357 | 359 | 360 | 364 | ``` 365 | 366 | 最终图片如下： 367 | 368 | 374 | 375 | 请注意，与左侧（红色）矩形相比，右侧（蓝色）矩形被移位。 376 | 377 | ## 组合变换 378 | 379 | 也可以通过在`transform`属性中放置多个变换函数来实现组合变换。 380 | 381 | 下面的例子首先对矩形进行移位变换，然后进行旋转变换。该示例展示了应用变换之前的矩形（蓝色），以及变换之后的矩形（黑色）。 382 | 383 | ```xml 384 | 387 | 390 | ``` 391 | 392 | 最终图片如下： 393 | 394 | 398 | 399 | ### 变换的顺序很重要 400 | 401 | 变换的顺序很重要，在`transform`属性内指定的变换函数序列是将它们应用到形状上的顺序。 402 | 403 | 下面的例子演示了对形状先位移后旋转和先旋转后位移之间的区别： 404 | 405 | ```xml 406 | 409 | 412 | 415 | ``` 416 | 417 | 最终图片如下： 418 | 419 | 424 | 425 | 黑色矩形未作变换，蓝色矩形先位移后旋转，红色矩形先旋转后位移。 426 | -------------------------------------------------------------------------------- /35.SVG填充图案.md: -------------------------------------------------------------------------------- 1 | # SVG填充图案 2 | *** 3 | 4 | > 5 | * [填充图案示例](#填充图案示例) 6 | * [X,Y,Width和Height](#x-y-width和height) 7 | * [嵌套图案](#嵌套图案) 8 | * [变换图案](#变换图案) 9 | 10 | SVG填充图案用于使用由图像组成的图案填充形状。此图案可以是SVG图像（形状）或者位图图像组成。 11 | 12 | SVG填充图案看起来像Photoshop中被称为“瓷砖”的东西。 13 | 14 | ## 填充图案示例 15 | 16 | 下面是一个简单的SVG填充图案的例子： 17 | 18 | ```xml 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 31 | ``` 32 | 33 | 首先，在``元素内部定义了一个``元素。`pattern`包含一个`circle`元素。这个`circle`元素将被用作填充图案。 34 | 35 | 然而，声明一个``元素，并在其`style`属性里的CSS属性`fill`引用``元素的ID。 36 | 37 | 最终图片如下： 38 | 39 | 51 | 52 | 注意观察，在``元素中定义的圆如何用作矩形的填充，以及圆如何从左到右，从上到下重复的。 53 | 54 | ## X,Y,Width和Height 55 | 56 | `pattern`元素的`x`和`y`属性定义重复的图案在形状中的开始位置。 57 | 58 | ``元素的`width`和`height`属性定义图案的宽度和高度。 59 | 60 | 下面是刚开始的例子，但是`x`和`y`被设置为0： 61 | 62 | ```xml 63 | 64 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 75 | ``` 76 | 77 | 最终图片如下： 78 | 79 | 91 | 92 | 注意，该图案现在从圆的中间开始（矩形顶部和左边缘），当你创建自己的填充模式时，你将不得不使用`x`和`y`值来实现你想要的效果。 93 | 94 | `width`和`height`属性设置图案的宽度和高度。 95 | 96 | 之前的例子中，`width`和`height`都被设置为圆的直径20。因此，这些重复的圆之间没有空隙。 97 | 98 | 下面的例子中，图案的`width`被设置为25。你会发现，现在圆在水平方向之间有5像素的空隙。 99 | 100 | 112 | 113 | 下面的例子也将`height`设置为25： 114 | 115 | 127 | 128 | 下面是一个同样的例子，但是将`x`和`y`设置为10（``元素中圆的圆心）： 129 | 130 | 142 | 143 | 现在图案从一个完整的圆开始，但仍然有额外的垂直和水平空隙。 144 | 145 | ## 嵌套图案 146 | 147 | 可以通过嵌套填充图案，使得一个填充图案内部使用另一个填充图案。这里是一个使用圆形作为矩形填充图案的示例。圆内部又使用一个矩形作为填充图案。 148 | 149 | ```xml 150 | 151 | 155 | 157 | 158 | 159 | 160 | 164 | 165 | 167 | 168 | 169 | 170 | 171 | 173 | ``` 174 | 175 | 最终图片如下： 176 | 177 | 193 | 194 | 正如你所看到的，外部矩形使用圆填充，圆又使用矩形填充。 195 | 196 | ## 变换图案 197 | 198 | 你可以通过`patternTransform`属性对填充图案使用标准的SVG变换函数。示例如下： 199 | 200 | ```xml 201 | 202 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 216 | ``` 217 | 218 | 这个例子定义了一个简单的图案，并在用作矩形的填充图案前将其旋转35度。最终图片如下： 219 | 220 | 231 | -------------------------------------------------------------------------------- /36.SVG剪裁路径.md: -------------------------------------------------------------------------------- 1 | # SVG剪裁路径 2 | *** 3 | 4 | > 5 | * [剪裁路径示例](#剪裁路径示例) 6 | * [高级剪裁路径](#高级剪裁路径) 7 | * [分组上的剪裁路径](#分组上的剪裁路径) 8 | * [文本作为剪裁路径](#文本作为剪裁路径) 9 | 10 | SVG剪裁路径（也称为SVG剪裁）用于根据特定剪裁路径SVG形状。路径中形状部分是可见的，而外面的部分不可见。 11 | 12 | ## 剪裁路径示例 13 | 14 | 下面是一个简单的剪裁路径示例： 15 | 16 | ```xml 17 | 18 | 19 | 20 | 21 | 22 | 23 | 25 | ``` 26 | 27 | 这个例子定义了一个形状像矩形（``元素内部的形状）的剪裁路径。例子最后定义的圆通过CSS属性`clip-path`引用``的`id`属性。 28 | 29 | 下图中，左边是最终图片，而右边是同样的图片，但是也绘制了剪裁路径。 30 | 31 | 43 | 56 | 57 | 请注意，只有剪裁路径中的圆的部分才可见，其余的被裁剪。 58 | 59 | ## 高级剪裁路径 60 | 61 | 除了矩形以外，你还可以使用其它形状作为剪裁路径，如圆、椭圆、多边形或者自定义路径。任何SVG形状都可以用作剪裁路径。 62 | 63 | 下面这个例子使用``元素作为剪裁路径，因为这些是你可以使用的最高级的剪裁路径类型。并将它应用于``元素。 64 | 65 | ```xml 66 | 67 | 68 | 69 | 70 | 71 | 72 | 75 | ``` 76 | 77 | 最终图片如右下图，左侧展示的是未裁剪的图片。 78 | 79 | 84 | 94 | 95 | ## 分组上的剪裁路径 96 | 97 | 可以在一组SVG形状上使用剪裁路径，而不是在每个单独的形状上使用。只需将形状放在``元素内，并在``元素上设置CSS属性`clip-path`。示例如下： 98 | 99 | ```xml 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 110 | 111 | 112 | 113 | ``` 114 | 115 | 下图中，左边是应用剪裁路径的图片，右侧是应用剪裁路径的图片： 116 | 117 | 123 | 136 | 137 | ## 文本作为剪裁路径 138 | 139 | 也可以使用文本作为剪裁路径，示例如下： 140 | 141 | ```xml 142 | 143 | 144 | This is a text 145 | 146 | 147 | 148 | 149 | 152 | 153 | 154 | ``` 155 | 156 | 最终未应用和应用剪裁路径的图片如下： 157 | 158 | 164 | 176 | 177 | 如你所见，现在只有文本中的形状部分可见。 178 | -------------------------------------------------------------------------------- /37.SVG遮罩.md: -------------------------------------------------------------------------------- 1 | # SVG 遮罩 2 | 3 | --- 4 | 5 | > 6 | 7 | - [SVG 遮罩](#svg-遮罩) 8 | - [遮罩示例](#遮罩示例) 9 | - [其它形状作为遮罩](#其它形状作为遮罩) 10 | - [遮罩形状颜色定义其不透明度](#遮罩形状颜色定义其不透明度) 11 | - [遮罩中使用渐变](#遮罩中使用渐变) 12 | - [遮罩中使用填充图案](#遮罩中使用填充图案) 13 | - [mask vs clipPath](#mask-vs-clippath) 14 | 15 | SVG 遮罩特性使得对 SVG 形状使用蒙版成为可能。遮罩确定 SVG 形状的哪些部分是可见的，以及具有什么透明度。你可以将 SVG 遮罩视作剪裁路径的更高级版本。 16 | 17 | ## 遮罩示例 18 | 19 | 下面是一个简单的遮罩示例： 20 | 21 | ```xml 22 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 32 | ``` 33 | 34 | 这个例子定义了 ID 为`mask1`的遮罩，``元素内是一个``元素，正是这个``元素定义了遮罩的形状。 35 | 36 | 例子中还定义了一个使用遮罩的``元素。其通过 CSS 属性`mask`引用遮罩。 37 | 38 | 最终图片如下： 39 | 40 | 51 | 52 | 注意要显示的矩形是 100 像素高，但垂直方向上只有前 50 像素可见。这是因为遮罩矩形只有 50 像素高。矩形仅在有遮罩矩形覆盖的部分中可见。 53 | 54 | 黑色轮廓矩形是没有遮罩的矩形的大小。 55 | 56 | ## 其它形状作为遮罩 57 | 58 | 你可以使用任何 SVG 形状作为遮罩。下面是使用圆形作为遮罩的例子： 59 | 60 | ```xml 61 | 72 | ``` 73 | 74 | 最终图片如下： 75 | 76 | 87 | 88 | 再次注意，引用遮罩的矩形只在遮罩圆形区域可见。 89 | 90 | ## 遮罩形状颜色定义其不透明度 91 | 92 | 到目前为止，遮罩形状（圆形或矩形）的填充颜色都设置为`#ffffff`。遮罩形状的颜色定义了使用遮罩形状的不透明度。遮罩形状的颜色越接近`#ffffff`（白色），使用遮罩的形状越不透明。遮罩形状的颜色越接近`#000000`（黑色），使用遮罩的形状越透明。 93 | 94 | 下面的例子中，遮罩又两个不同颜色的矩形组成（`#ffffff`和`#666666`）。遮罩在单个矩形上使用，因此你可以看到形状在两个不同颜色遮罩形状下的效果。 95 | 96 | ```xml 97 | 98 | 99 | 100 | 102 | 103 | 105 | 106 | 107 | 108 | 109 | This text is under the rectangle 110 | 111 | 112 | 114 | ``` 115 | 116 | 这个例子的矩形下方有一个文本，其仅可通过矩形遮罩是半透明的部分可见。 117 | 118 | 最终图片如下： 119 | 120 | 132 | 133 | ## 遮罩中使用渐变 134 | 135 | 如果对你用作遮罩的形状应用渐变，则可以实现应用遮罩的形状的渐变透明度。 136 | 137 | 下面例子定义了一个渐变，一个使用渐变的遮罩，一个使用遮罩的矩形以及矩形下方的文本，因此你可以看到随着遮罩渐变的透明度的变化： 138 | 139 | ```xml 140 | 141 | 145 | 146 | 147 | 148 | 149 | 150 | 152 | 153 | 154 | 155 | 156 | This text is under the rectangle 157 | 158 | 160 | ``` 161 | 162 | 最终图片如下： 163 | 164 | 180 | 181 | 渐变遮罩可以与其它效果（如填充图案）组合。下面例子中的可见矩形同时使用了填充图案和渐变遮罩： 182 | 183 | ```xml 184 | 185 | 186 | 190 | 191 | 192 | 193 | 194 | 195 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 206 | 207 | 208 | 209 | 210 | This text is under the rectangle 211 | 212 | 214 | ``` 215 | 216 | 注意要显示的矩形如何从其 CSS 属性`fill`引用填充图案，并从其 CSS 属性`mask`引用遮罩。 217 | 218 | 最终图片如下： 219 | 220 | 244 | 245 | ## 遮罩中使用填充图案 246 | 247 | 你还可以在遮罩中使用填充图案，从而使遮罩成为填充图案的形状。示例如下： 248 | 249 | ```xml 250 | 251 | 254 | 255 | 256 | 257 | 258 | 259 | 261 | 262 | 263 | 264 | 265 | This text is under the rectangle 266 | 267 | 269 | ``` 270 | 271 | 最终图片如下。注意，现在矩形中填充图案部分是半透明的，其它部分是完全透明的。 272 | 273 | 291 | 292 | ## mask vs clipPath 293 | 294 | mask 和 clipPath 在用法和用途上非常相似，但 mask 是作为 clipPath 更高级的能力出现的。但有一点区别是 clipPath 不处理 alpha，它只会剪切标签中形状边界内的内容。我们来通过代码来看下： 295 | 296 | ```html 297 | 312 | ``` 313 | 314 | 这段代码的运行结果如图所示： 315 | 316 | ![](assets/37/mask.svg) 317 | 318 | 之所以会有不同的结果，这是因为 clipPath 只关注形状的裁切，不关心 alpha 通道。更多信息参考 [06. Clip-path & Mask](https://viewbox.club/tips/06.SVG_ClipPath_vs_Mask.html) 319 | -------------------------------------------------------------------------------- /38.SVG滤镜.md: -------------------------------------------------------------------------------- 1 | # SVG滤镜 2 | *** 3 | 4 | > 5 | * [滤镜示例](#滤镜示例) 6 | * [滤镜输入和输出](#滤镜输入和输出) 7 | * [滤镜尺寸](#滤镜尺寸) 8 | * [组合滤镜](#组合滤镜) 9 | * [高斯模糊滤镜](#高斯模糊滤镜) 10 | * [模糊大小](#模糊大小) 11 | * [模糊Alpha通道](#模糊alpha通道) 12 | * [偏移滤镜](#偏移滤镜) 13 | * [彩色矩阵滤镜](#彩色矩阵滤镜) 14 | * [混合滤镜](#混合滤镜) 15 | 16 | SVG滤镜用于为你的SVG图像添加漂亮的效果，例如投影、模糊或高亮。 17 | 18 | ## 滤镜示例 19 | 20 | 下面是一个简单的SVG滤镜示例，展示了两个椭圆，左边的椭圆没有滤镜，而右侧的椭圆使用高斯模糊滤镜渲染： 21 | 22 | ```xml 23 | 24 | 26 | 27 | 28 | 29 | 31 | 32 | 34 | ``` 35 | 36 | 最终图片如下： 37 | 38 | 50 | 51 | 注意右侧椭圆的边缘是如何模糊的。 52 | 53 | ## 滤镜输入和输出 54 | 55 | SVG滤镜需要一些输入（源），并为它们应用滤镜效果。滤镜的输入可以是图形形状（意味着RGB颜色），形状的alpha通道或另一个滤镜的输出。 56 | 57 | SVG滤镜从输入产生图形输出（结果）。此输出是正常显示的，而不是应用滤镜的形状。滤镜的输出可以用作另一个滤镜的输入，因此，滤镜可以链式添加。 58 | 59 | 下面是SVG滤镜输入和输出的图示： 60 | 61 | 62 | 63 | 64 |

SVG滤镜可以使用图形形状，alpha通道或另一个滤镜的输出作为输入。

65 | 66 | SVG滤镜的输入通常在滤镜元素的`in`属性中指定。示例如下： 67 | 68 | ```xml 69 | 70 | ``` 71 | 72 | 如果一个SVG滤镜的输出用作另一个滤镜的输入，则需要向滤镜元素添加一个`result`属性。示例如下： 73 | 74 | ```xml 75 | 77 | ``` 78 | 79 | 现在，另一个SVG滤镜可以通过将值`blur`放入其`in`属性中来使用此滤镜的输出。在上面的示例中，值`blur`是在过滤器的`result`属性中指定。 80 | 81 | ## 滤镜尺寸 82 | 83 | 滤镜的尺寸通过`x`，`y`，`width`和`height`属性设置。 84 | 85 | `x`和`y`属性被解释为相对于作为输入的形状的`x`和`y`坐标。由于一些滤镜的输出通常比输入大（如在形状周围添加的模糊），你通常需要为`x`和`y`使用负数，以避免截断滤镜添加的图形。 86 | 87 | `width`和`height`属性一样简单。同样，有时可能需要指定大于输入形状的宽度和高度，以避免截断由滤镜添加的效果。 88 | 89 | ## 组合滤镜 90 | 91 | 你可以使用``元素组合滤镜。示例代码如下： 92 | 93 | ```xml 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 108 | ``` 109 | 110 | 这个例子创建了包含两个滤镜元素（``和``）的SVG滤镜。偏移滤镜效果对其应用的形状的Alpha通道起作用。高斯模糊对偏移滤镜效果的输出起作用。 111 | 112 | ``元素将模糊滤镜的输出和原始图形相结合。输入按照它们出现在``元素内的顺序进行组合。因此，后面的输入在之前的输入的上面。结果是一个图像，其中形状看起来有一个阴影。这是最终图片： 113 | 114 | 130 | 131 | ## 高斯模糊滤镜 132 | 133 | 高斯模糊SVG滤镜可以模糊SVG形状，其由``元素表示。示例如下： 134 | 135 | ```xml 136 | 137 | 138 | 139 | 140 | 141 | 143 | ``` 144 | 145 | 这个例子定义了一个``，其中包含一个``。然后定义了一个通过CSS属性`filter`引用该滤镜的绿色矩形。最终图片如下： 146 | 147 | 155 | 156 | ### 模糊大小 157 | 158 | ``元素的`stdDeviation`属性确定了应用滤镜的形状的模糊程度。数字越大，形状越模糊。以下是`stdDeviation`属性具有不同值的三个示例： 159 | 160 | ```xml 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 175 | 177 | 179 | ``` 180 | 181 | 最终图片如下： 182 | 183 | 200 | 201 | 注意，应用到矩形上的滤镜的`stdDeviation`属性值越来越大，矩形也越来越模糊。 202 | 203 | ### 模糊Alpha通道 204 | 205 | 上面的例子中使用`SourceGraphic`作为输入，意味着形状的RGB颜色用作滤镜的输入。你可以通过在``元素的`in`属性中设置`SourceAlpha`值，使用形状的alpha通道作为输入。示例如下： 206 | 207 | ```xml 208 | 209 | 210 | 211 | 212 | 213 | 215 | ``` 216 | 217 | 最终图片如下： 218 | 219 | 227 | 228 | 注意，即使矩形用绿色填充定义，滤镜的输出也是黑色和白色。当高斯模糊滤镜应用于alpha通道而不是图形（RGB）通道时，会发生这种情况。 229 | 230 | ## 偏移滤镜 231 | 232 | 偏移滤镜接受输入并移动输入作为输出。也就是说，它可以向上、向下、向左或向右移动形状。因此，除了它是一个滤镜外，它的工作方式位移变换一样。示例如下： 233 | 234 | ```xml 235 | 236 | 237 | 238 | 239 | 240 | 242 | 244 | ``` 245 | 246 | 这个例子在完全相同的位置定义了两个矩形。其中一个矩形应用了一个偏移滤镜，使它向右下方移动。 247 | 248 | 最终图片如下： 249 | 250 | 259 | 260 | 看起来偏移滤镜对形状也有一些其它影响（一种模糊），但我不知道为什么。我没有找到为什么会发生这种情况的解释。 261 | 262 | ## 彩色矩阵滤镜 263 | 264 | 彩色矩阵滤镜可以用于将矩阵变换应用于形状的颜色。示例如下： 265 | 266 | ```xml 267 | 268 | 269 | 275 | 276 | 277 | 279 | ``` 280 | 281 | 矩阵的值有``元素的`values`属性提供。总共必须有4 x 5 = 20个值。这些值应用于原始形状的颜色，如下所示： 282 | 283 | ``` 284 | 0 0 0 red 0 285 | 0 0 0 green 0 286 | 0 0 0 blue 0 287 | 0 0 0 1 0 288 | ``` 289 | 290 | 最终图片如下： 291 | 292 | 305 | 306 | 注意：我在Chrome和Firefox中使用彩色矩阵滤镜得到了一些奇怪的结果。上面的矩形指定填充颜色，但是一旦使用彩色矩阵滤镜，只剩下轮廓。 307 | 308 | ## 混合滤镜 309 | 310 | 混合滤镜可以将来自多个滤镜的输入混合成一个。示例如下： 311 | 312 | ```xml 313 | 329 | ``` 330 | 331 | 这个例子声明了一个使用三个滤镜效果的滤镜。前两个是偏移和高斯滤镜效果，第三个是``效果，它接受两个输入（`in`和`in2`），并将它们混合成一个。 332 | 333 | 最终效果非常类似于本文前面所述的组合过滤器。 334 | 335 | 349 | -------------------------------------------------------------------------------- /4.在Web浏览器中显示SVG.md: -------------------------------------------------------------------------------- 1 | # 在Web浏览器中显示SVG 2 | *** 3 | > 4 | * [教程视频版](#教程视频版) 5 | * [iframe](#iframe) 6 | * [img](#img) 7 | * [SVG作为背景图片](#svg作为背景图片) 8 | * [HTML嵌套SVG元素](#html嵌套svg元素) 9 | * [embed](#embed) 10 | * [宽度和高度](#宽度和高度) 11 | * [使用SVG作为HTML元素的背景图片](#使用svg作为html元素的背景图片) 12 | * [浏览器支持](#浏览器支持) 13 | * [Content Type](#content-type) 14 | 15 | 可以通过如下几个方法在Web浏览器（如Chrome，Firefox和IE）中显示SVG： 16 | 17 | * 直接在浏览器中打开SVG文件 18 | * 将SVG嵌入HTML页面 19 | 20 | 你也可以通过下面几个方法将SVG图片嵌套在HTML文件中： 21 | 22 | * 使用`iframe`元素 23 | * 使用`img`元素 24 | * 使用SVG图片作为背景图片 25 | * 使用`svg`元素 26 | * 使用`embed`元素 27 | 28 | ## 教程视频版 29 | 30 | 如果你喜欢看视频版教程，我在此做了一个链接： 31 | 32 | 33 | 34 | ## iframe 35 | 36 | 由于如果你输入SVG图像的URL，浏览器可以显示SVG图像，你也可以在HTML页面中使用`iframe`标签，引入SVG图像，示例代码如下： 37 | ```html 38 | 17 | 18 | ## 数学/笛卡尔坐标系 19 | 20 | 一般的笛卡尔坐标系中，x=0,y=0坐标点在在图标的**左下角**。随着x的增加，点在坐标系中**向右**移动。随着x的减小，点在坐标系中**向左**移动。随着y增加，点在坐标系中**向上**移动。随着y减小，点在坐标系中**向下**移动。 21 | 22 | 下面是一个正常的坐标系的例子，0,0点在左下角： 23 | 24 | 37 | 38 | ## SVG坐标系 39 | 40 | 在SVG坐标系中，x=0,y=0点在**左上角**。与正常的图坐标系相比，y轴被反转。随着SVG中y的增加，点、形状等向下移动，而不是向上。 41 | 42 | 下面是一个0,0点在左上角的SVG坐标系的例子： 43 | 44 | 57 | 58 | ## 坐标系单位 59 | 60 | 你可以指定SVG坐标系中对应的1个单位。你可以到处都指定一个坐标（`x`和`y`位置，`width`和`height`等）。你也可以在值后面指定单位，例如`10cm`或`125mm`。 61 | 62 | 如果你没有在坐标值后面指定任何单位，则假定单位为像素（`px`）。 63 | 64 | 以下是可用于SVG元素的单位列表： 65 | 66 | ``` 67 | Unit Description 68 | em The default font size - usually the height of a character. 69 | ex The height of the character x 70 | px Pixels 71 | pt Points (1 / 72 of an inch) 72 | pc Picas (1 / 6 of an inch) 73 | cm Centimeters 74 | mm Millimeters 75 | in Inches 76 | ``` 77 | 78 | 你在`