如何解释.svg矢量图像的内部

Question

我很好奇矢量图像（特别是.svg）的工作方式。

当我在记事本中打开.svg矢量图像时，我可以看到组成图像的XML数据（我提供了一个示例here以供快速参考）。

据我所知，前几个标签是元数据，以下标签各自对应不同的行，但我不明白每个标签中的class，d和transform元素究竟是什么意思，以及它们是如何形成的描述一条线。

Answer 1

SVG d元素的<path />属性包含绘制线条的说明。我认为这是SVG中最复杂的属性，但是MDN在一篇非常容易理解的文章中对其进行了解释：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d简而言之，它告诉解释器连接点x0,y0，x1,y1，{{1使用直线/曲线/弧线或只是从一个点跳到嵌套。

可以使用很多simpler constructs定义许多形状 - 简单到可以手工编写或仅通过查看源代码进行解释：例如x2,y2，<line />，{{1} }或<rect />。

<circle />属性更改元素的位置/大小/旋转，而无需重新计算源代码中的每个点，<polyline />用于样式设置，因此您可以定义外观（颜色，线条粗细，填充）与形状定义无关。