SVG 到属性(1) - 芒果文档

📌 相关文章

📜 SVG 到属性(1)

📅 最后修改于: 2023-12-03 15:05:24.879000 🧑 作者: Mango

SVG 到属性

什么是 SVG？

SVG（Scalable Vector Graphics）即可伸缩向量图形，是一种基于 XML 语法实现的矢量图形，可用于描述二维图形、图标和插图等各种图形样式。SVG 图形可以缩放并保持清晰，无论是手机还是电脑屏幕，都可以保证显示效果。

SVG 文件结构

一个 SVG 图形通常包括以下内容：

<svg width="50" height="50">
  <rect x="10" y="10" width="30" height="30" fill="blue"/>
</svg>

<svg> 标签定义了图形的容器，包括它的宽度和高度。
<rect> 标签定义了一个矩形，包括它的位置、大小和填充颜色。

SVG 属性

以下是常用的 SVG 属性：

基本标签属性

| 属性名 | 描述 | 取值 | | ------ | --------------------------------------- | ----------------------------------------------------------- | | id | 元素的唯一标识符 | 字符串 | | class | 元素的样式类 | 类名，多个类名使用空格分隔 | | style | 元素的样式 | CSS 样式 | | title | 元素的标题，鼠标悬浮时显示的内容 | 字符串 | | tabindex | 元素在 Tab 键顺序中的索引 | 整数 | | onclick | 点击事件的响应函数 | 函数名 |

坐标属性

| 属性名 | 描述 | 取值 | | ---------- | ------------------------------------------------- | ---------------- | | x | 元素的 x 坐标，左上角相对于 SVG 容器左侧的距离 | 数值，单位为像素 | | y | 元素的 y 坐标，左上角相对于 SVG 容器顶部的距离 | 数值，单位为像素 | | width | 元素的宽度 | 数值，单位为像素 | | height | 元素的高度 | 数值，单位为像素 | | cx | 圆心的 x 坐标 | 数值，单位为像素 | | cy | 圆心的 y 坐标 | 数值，单位为像素 | | r | 圆的半径 | 数值，单位为像素 | | rx | 水平方向上椭圆的半轴长度，通常与 width 定义长相 | 数值，单位为像素 | | ry | 垂直方向上椭圆的半轴长度，通常与 height 定义长相 | 数值，单位为像素 |

颜色属性

| 属性名 | 描述 | 取值 | | -------- | ---------------------- | ------------ | | stroke | 描边颜色 | 颜色值 | | fill | 填充颜色 | 颜色值 | | opacity | 元素的不透明度 | 透明度值 | | fill-opacity | 填充颜色的不透明度 | 透明度值 | | stroke-opacity | 描边颜色的不透明度 | 透明度值 |

文本属性

| 属性名 | 描述 | 取值 | | ----------- | ---------- | ------------ | | font-size | 字体大小 | 数值，单位为像素 | | font-family | 字体名称 | 字符串 | | text-anchor | 文本锚点 | start/middle/end | | text-align | 文本对齐方式 | left/center/right |

SVG 到 HTML 属性

SVG 元素可以像 HTML 元素一样添加属性，例如，可以使用 class 属性添加一个类名，也可以使用 style 属性添加 CSS 样式。同时，也可以使用 data-* 属性来存储自定义数据。

<!DOCTYPE html>
<html>
  <body>
    <svg>
      <rect x="10" y="10" width="30" height="30" class="blue" style="stroke:black;stroke-width:2"/>
    </svg>
  </body>
</html>

这个例子中，我们给矩形元素添加了类名 blue，并使用 style 属性定义了描边颜色和宽度。另外，也可以给它添加一个自定义数据 data-id，例如：

<rect data-id="12345" />

在 JavaScript 中，可以使用 getAttribute() 方法获取这个自定义数据：

var rect = document.querySelector('rect');
var id = rect.getAttribute('data-id');
console.log(id); // 输出 "12345"

结论

由于 SVG 只是一个 XML 元素，你可以使用任何 XML 编辑器来编辑 SVG 图形，而且可以通过 JavaScript 动态修改 SVG 属性。掌握 SVG 属性的含义，可以更好地控制 SVG 图形的样式和行为，使其更适合你的需求。