23

私の SVG の理解が正しければ、次の 2 つの SVG 記述は同一の画像になりますが、そうではありません。(注: 2 つのコード リストは、svgタグの座標値のみが異なります。より具体的には、最初のリストのすべての ( x , y ) ペアに対して、2 番目のリストには ( x -205, y -55) ペアがあります。)

<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     x="0" y="0" width="210" height="60" viewBox="0 0 210 60">

      <g style="stroke: black; fill: none;">
        <path d="M 5 5 Q 105 55 205 55"/>
      </g>

    </svg>

  </body>
</html>


<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     x="-205" y="-55" width="210" height="60" viewBox="-205 -55 5 5">

      <g style="stroke: black; fill: none;">
        <path d="M -200 -50 Q -100 0 0 0"/>
      </g>

    </svg>

  </body>
</html>

実際、少なくとも Firefox によると、それらはまったく異なって見えます。私がそれらの両方に期待したレンダリングは、Firefox が最初のものに提供するものです (つまり、左から右に緩やかに傾斜する曲線で、最初の勾配が -1/2 で、最終的な勾配が 0 です)。私は FF が 2 番目のものに対して生成するものに完全に困惑しています。なぜなら、2 番目の仕様は最初の仕様のベクトル (-205, -55) による単純な大規模な (「厳密な」) 変換だからです。

2 つのディスプレイが同じように見えないのはなぜですか?

4

3 に答える 3

17

viewbox の座標は x1、y1、x2、y2 ではないため、minx、miny、width、および heightです。

于 2013-01-28T05:01:55.243 に答える
2

これは非常に遅くなりましたが、マイケルが将来の視聴者のために上記のポイントを明確にするために：

ここで数を変更しても多くはありませんが、同じ結果が得られます。

あなたが直面している問題の 1 つはmin-x + width、どちらの svg ノードでも同じであると考えていることです。min-xとmin-yは、あなたの左端と一番上の座標ですviewBox- 効果的に0, 0位置をmin-x, min-yに変更し、実際には の座標系viewBox(および拡張によりpathのd属性) にのみ関連し、viewBox自体のサイズ変更には関連しません。

また、svgノードの x と y の位置は有効ですが無視され、配置とは関係ありません。

xしたがって、2 番目のパスを最初のパスのように見せるには、属性とy属性を取り除き、内部の と の数値をwidth最初のものと一致するように変更します。heightviewBox

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 width="210" height="60" viewBox="-205 -55 210 60">

  <g style="stroke: black; fill: none;">
    <path d="M -200 -50 Q -100 0 0 0"/>
  </g>

</svg>
于 2014-03-04T22:51:42.693 に答える