如何解釋.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用於樣式目的，因此您可以定義外觀（顏色，線條粗細，填充）獨立於形狀定義。