如何解释 .svg 矢量图像的内部
How to interpret the inside of a .svg vector image
我很好奇矢量图（特别是 .svg）的工作原理。
当我在记事本中打开 .svg 矢量图像时，我可以看到构成图像的 XML 数据（我放了一个示例 here 以供快速参考）。
我知道前几个标签是元数据，后面的标签分别对应不同的行，但我不明白每个标签中的class、d、transform元素到底是什么意思，以及他们如何描述一条线。
SVG <path /> 元素的 d 属性包含绘制线条的说明。我认为它是 SVG 中最复杂的属性，但 MDN 在一篇相当通俗易懂的文章中对其进行了解释：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d 简而言之，它告诉解释器连接点 x0,y0、x1,y1、x2,y2 ...等使用 line/curve/arc 或者只是从一个点跳到嵌套。
许多形状可以使用 much simpler constructs 来定义 - 简单到可以手写或通过查看源代码来解释：像 <line />、<rect />、<circle /> 或 <polyline />。
transform 属性更改元素的 position/size/rotation 而无需 re-calculate 源代码中的每个点，并且 class 用于样式目的，因此您可以独立于形状定义来定义外观（颜色、线条粗细、填充）。
我很好奇矢量图（特别是 .svg）的工作原理。
当我在记事本中打开 .svg 矢量图像时，我可以看到构成图像的 XML 数据（我放了一个示例 here 以供快速参考）。
我知道前几个标签是元数据，后面的标签分别对应不同的行，但我不明白每个标签中的class、d、transform元素到底是什么意思，以及他们如何描述一条线。
SVG <path /> 元素的 d 属性包含绘制线条的说明。我认为它是 SVG 中最复杂的属性，但 MDN 在一篇相当通俗易懂的文章中对其进行了解释：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d 简而言之，它告诉解释器连接点 x0,y0、x1,y1、x2,y2 ...等使用 line/curve/arc 或者只是从一个点跳到嵌套。
许多形状可以使用 much simpler constructs 来定义 - 简单到可以手写或通过查看源代码来解释：像 <line />、<rect />、<circle /> 或 <polyline />。
transform 属性更改元素的 position/size/rotation 而无需 re-calculate 源代码中的每个点，并且 class 用于样式目的，因此您可以独立于形状定义来定义外观（颜色、线条粗细、填充）。