79

[0,0] が左上ではなく左下になるように SVG 座標系を反転する方法はありますか?

4

9 に答える 9

82

私は多くの実験を行いましたが、唯一の論理的な方法は次のとおりです。

<g transform="translate(0,400)">
<g transform="scale(1,-1)">

400 は画像の高さです。画像の上部が画像の下部になるようにすべてを下に移動し、スケール操作で Y 座標を反転して、ページ/画像から外れているビットを反転して塗りつぶします。残されたスペース。

于 2010-10-03T09:04:54.253 に答える
36

デカルト座標系に変換するために私が見つけた最高の組み合わせは、非常に単純です。

CSS

svg.cartesian {
  display:flex;
}

/* Flip the vertical axis in <g> to emulate cartesian. */
svg.cartesian > g {
  transform: scaleY(-1);
}

/* Re-flip all <text> element descendants to their original side up. */
svg.cartesian > g text {
  transform: scaleY(-1);
}
<html>
  <head></head>
  <body>

  <svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
  <g>
    <!-- SVG Start -->

    <!-- Vertical / Horizontal Axis: Can be removed if you don't want x/y axes. -->
    <path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
    <path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
    
    <!-- Plotting: This is an example plotting two points at (20, 20) and (-50, -35), replace it with your data. -->
    <g transform="translate(20, 20)">
      <circle r="1" />
      <text>(20, 20)</text>
    </g>
    <g transform="translate(-50, -35)">
      <circle r="0.5" />
      <text>(-50, -35)</text>
    </g>

    <!-- SVG End -->
  </g>
  </svg>
    </body>
  </html>

これにより、css を介してページ上のすべてのテキスト要素が自動的に反転されますscaleY(-1)。

于 2016-08-07T06:20:39.623 に答える
14

私はこれが古いことを知っていますが、私は同じことをしていました.@Nippysaurusバージョンを試しましたが、すべてが回転するので面倒です. 別の解決策がありますが

私がしたことは、のviewBoxを移動svgし、y軸上のすべての座標を反転するだけでした（オブジェクトの高さを削除して、左下隅にもします）。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="300" viewBox="0 -300 200 300">
  <rect x="20" y="-40" width="20" height="20" stroke="black" stroke-width="1px"></rect>
</svg>

これrectにより、 の左下隅から 20,20 に配置されます。http ://jsfiddle.net/DUVGz/svgを参照してください。

于 2013-09-20T15:52:48.447 に答える
4

SVG のサイズがわからない場合は、SVG 要素全体に CSS 変換を使用できます。

#parrot {
    transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
    transform: scale(1,-1);
}

クレジット: https://sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css

于 2016-08-07T11:27:49.110 に答える
4

はい、-90 の座標回転に続いて + の平行移動で、新しいフィギュアの高さを調整できます。W3Cに例があります。

于 2010-10-02T14:01:39.163 に答える
-2

私が通常行ったことは、デカルト平面のy軸の負の値に座標を描画/配置することです。後で、y 軸の負の値を正の値に置き換えて座標を転送します。

于 2021-02-01T17:32:57.043 に答える
-7

要素を 180 度回転させる最も簡単な方法は、180.1 度回転させることだと思います。

transform="翻訳(180.1,0,0)"

于 2014-11-24T14:05:32.317 に答える