ベクトルイメージ(特に.svg)がどのように機能するかについては、私は興味があります。.svgベクトルイメージの内部を解釈する方法
メモ帳で.svgベクトルイメージを開くと、イメージを構成するXMLデータが表示されます(私は例をhereとしています)。
最初のタグはメタデータであり、次のタグはそれぞれ異なる行に対応していることを理解していますが、各タグ内のclass、d、transform要素が実際に意味するもの、ライン。
ベクトルイメージ(特に.svg)がどのように機能するかについては、私は興味があります。.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 />
、<rect />
、<circle />
または<polyline />
のように:手によって書かれたか、単にソースコードを見ることで解釈できるほど単純で -
多くの形状がsimpler constructs多くを使用して定義することができます。
transform
属性は、ソースコード内のすべての点を再計算する必要なしに要素の位置/サイズ/回転を変更し、スタイリング目的でclass
が使用されるため、外観(色、線の太さ、塗りつぶし)します。
クラスを無視してトランスフォームすると、肉は「d」属性になります。https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d – pawel
ありがとう、これはまさに私です探していたどんなに私が検索しても、ベクトル画像がどのように機能するかについての高度な説明しか見つけることができませんでした。これを回答として投稿すると、私は受け入れられたとマークすることができます。 – Logan