SVGで反転を使う方法

Pocket

SVGは反転を簡単に描くことができます。
ただし設定方法が分かりにくいのでまとめておきます。

次の図は青の線を描き反転して赤の線にしたものです。

変形transformを使います。
反転は平行移動translateとサイズ変更scaleを使います。
一度、右に図形を平行移動させ、反転させます。
scaleはxのサイズ変更とyのサイズ変更を指定するのですがxにマイナスを指定すると反転になります。

<line x1="100" y1="0" x2="50" y2="100"
 stroke="red" stroke-width="3"
 transform="translate(100,0)scale(-1,1)" />

次の図は説明のための図です。
まず青の実線を描きます。
これを画像の幅と同じだけ右に平行移動します。青の点線です。
次に画像の右端を軸として反転します。赤の実線です。

[ 2022年8月20日 | カテゴリー: デジタル | タグ: , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報