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

Question

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

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

据我所知，前几个标签是元数据，并且每个标签都对应不同的行，但我不明白每个标签中的类，d和转换元素实际上是什么意思，以及它们如何描述一条线。

Answer 1

SVG <path />元素的d属性包含绘制线条的说明。我认为这是SVG中最复杂的属性，但MDN在相当易读的文章中对其进行了解释：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d简而言之，它告诉解释器使用线/曲线/弧连接点x0,y0,x1,y1,x2,y2 ...等或仅跳转从一点到巢穴。

许多形状，可以使用多simpler constructs定义 - 很简单的手工书写或通过看源代码解释：像<line />，<rect />，<circle />或<polyline />。

transform属性更改元素的位置/大小/旋转，而无需重新计算源代码中的每个点，并且class用于样式目的，因此您可以定义外观（颜色，线条粗细，填充）独立于形状定义。