SVG绘图中的每个窗口元素或图形元素都可以提供一个title描述性字符串，该描述只能是纯文本。通常title元素必须是它的父元素的第一个子元素。注意，只有当title是它的父元素的第一个子元素的时候，那些编译器才会把title显示为一个提示冒泡。 ``` this is rect ``` 当鼠标悬浮在矩形上时，就会冒泡提示title里面的内容。对title的style属性设置字体颜色无效。 ### 主要属性无特别的主要属性 --- # 文本 ## \ 定义了一个由文字组成的图形。 ``` SVG Text Example ``` ### 主要属性 - **x** x轴方向的距离。 - **y** y轴方向的距离。 - **dx** x方向的偏移量。 - **dy** y方向的偏移量。 - **text-anchor** 文本锚点属性被用来描述该文本与所给点的对齐方式 (开头、中间、末尾对齐)，属性值：start | middle | end | inherit。 - **textLength** 指定文本将绘制到的空间的宽度，相当于限制文本绘制的区域大小，属性值：百分比 | 数字。 - **lengthAdjust** lengthAdjust属性控制文本如何被拉伸成textLength属性定义的长度。属性值：spacing | spacingAndGlyphs ## \ 在 `` 标签里面创建子文本，类似于 `HTML` 里面的 ``。 ``` SVG Text Example ``` ### 主要属性除开没有 `text-anchor` 属性，其他与上面 `` 描述的属性一致。 ## \ 沿指定的path来绘制文本 ``` // 来自MDN示例 Quick brown fox jumps over the lazy dog. ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef19b72ca0a94a79b59f75add2805366~tplv-k3u1fbpfcp-zoom-1.image) ### 主要属性 - href 需要选用的path对应的标识（一般是id）。 - path 未指定href时需要指定对应的路径数据。 - method 这个暂时没搞明白，属性值有：align | strench。 - side 这个暂时没搞明白，属性值有：left | right。 - startOffset 文本的开头应该与路径的开头偏移多远。 - textLength 同 - lengthAdjust 同 --- # 渐变 ## \ 定义线性渐变，用于图形元素的填充或描边。 ``` // 来自MDN示例 ``` ### 主要属性 - gradientUnits 属性的值：userSpaceOnUse | objectBoundingBox，这个应该是表明渐变的基准坐标已谁为准，userSpaceOnUse表示已当前用户坐标系统为准，objectBoundingBox表示以元素的边界框建立坐标，同时结合gradientTransform进行转换。 - gradientTransform 定义渐变的形状变换，比如使用skewX和translate这些函数来进行变换。目前没怎么搞懂这个属性，估计这个属性的取值应该就是css里面transform对应的取值。 - x1 - y1 - x2 - y2 > x1 y1 x2 y2这个表示渐变的起始位置到结束位置。 - spreadMethod 决定如何在渐变的定义边缘之外填充形状。属性的取值：pad | reflect | repeat ## \ 定义渐变上的颜色坡度，适用于 `` 和 ``。 ### 主要属性 - offset 颜色起始或结束时的偏移量，使用百分比 - stop-color 起始或结束时渐变的颜色。 - stop-opacity 起始或结束时渐变的透明度。 ### 主要属性对应的图示示例代码 ``` ``` - gradientUnits **设置为：userSpaceOnUse** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dc83c123e0c402c91d696afbc09fe20~tplv-k3u1fbpfcp-zoom-1.image) **设置为：objectBoundingBox（默认值）** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0305e66d9293490cb99d513601204c07~tplv-k3u1fbpfcp-zoom-1.image) - spreadMethod **设置为：pad（默认值）** > 注意：这个需要结合到x1 x2 y1 y2坐标一起使用，不然看不到效果。修改一下示例代码 ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6db8efcdda83408bbe4b0c623a67afee~tplv-k3u1fbpfcp-zoom-1.image) **设置为：reflect** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ab02424ef314158a80263ed7505fce0~tplv-k3u1fbpfcp-zoom-1.image) **设置为：repeat** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31db09c4568841c7b95c0ba4bb25b7c3~tplv-k3u1fbpfcp-zoom-1.image) ### 示例代码绘制一个从上往下渐变的柱子，经常用于柱状图 ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/694d837b31634160b695c4efa942f374~tplv-k3u1fbpfcp-zoom-1.image) ## \ 用来定义径向渐变，以对图形元素进行填充或描边。这个理解为用来定义放射状的渐变。该标签也需要结合 `` 标签一起使用。 ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d89c48d15c04d86bde93c1ed4a1bd78~tplv-k3u1fbpfcp-zoom-1.image) 由图示可以看出。默认情况下，渐变是从中心开始，逐渐往外变化。 ### 主要属性 - gradientUnits 同 `` 的同名属性。 - gradientTransform 同 `` 的同名属性。 - spreadMethod 同 `` 的同名属性。 - cx 定义一个中心点的 x 轴坐标。 - cy 定义一个中心点的 y 轴坐标。 - r 放射渐变的半径。 - fx 此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。 - fy 此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。 - fr 此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。 ### 主要属性示例 - 改变中心坐标的位置，设置cx，cy为20%。 ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cf5d9f0f69045ff8be66ed51e98fa65~tplv-k3u1fbpfcp-zoom-1.image) - 渐变半径r改为20% ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/973604fc086e4849b4315b4b679988d2~tplv-k3u1fbpfcp-zoom-1.image) - 将fx fy设置为20% ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14eb7ce402f0481792329051b9418217~tplv-k3u1fbpfcp-zoom-1.image) - 将fr设置为20% ``` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31306caaf130476eb65d3c6b3f48ddab~tplv-k3u1fbpfcp-zoom-1.image) # 其他 ## \ marker元素定义了在特定的元素、元素、元素或者元素上绘制的箭头或者多边标记图形。 > https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/marker ## \ SVG 元素 `` 定义一条剪切路径，可作为其他元素的 clip-path 属性的值。剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制。 > https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/clipPath

--- highlight: arduino-light theme: awesome-green --- # 参考教程 [W3C SVG教程](https://www.w3school.com.cn/svg/index.asp) [菜鸟 SVG教程](https://www.runoob.com/svg/svg-tutorial.html) [MDN SVG教程](https://developer.mozilla.org/zh-CN/docs/Web/SVG) [MDN Tutorial](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial) 如有疏漏和错误，请大家多多指教！！！ # 目录 - **容器** - **形状** - **文本** - **渐变** - **其他** # 容器 ## \