0

やりたいこと
<div width="100%"></div>内で、(画面の大きさに合わせて)できるだけ大きくSVG表示したい。
width="100%"内なので、SVGに大きさの固定数値を指定したくない。
縦横比は可変してもよい。


追記

下記のような感じですか?
svgタグ自体には width や height や viewBox属性を別に指定しなくてもよいのですか?

<div style="width: 100%;">
    <svg>
        <!-- ここにSVGの内容を記述 -->
    </svg>
</div>

追記 2
rectタグをできるだけ緑色の範囲まで大きく表示させたいのですが、rect タグのx位置やy位置は固定ですか? widthも100%にはならないのですか?
縦横比は可変でもよいと思い、試しに<svg preserveAspectRatio="none">へ変更してみましたが、表示は何も変わりませんでした。

body {
  background-color: yellow;
  margin: 0;
}
<div style="width: 100%;background-color:green;">
  <svg>
    <rect x="42.597706" y="42.440388" style="fill:#d6eaff;" width="1598.741699" height="2298.899414"></rect> 
  </svg>
</div>

1
  • 関連するコードも質問に含めてください。
    – cubick
    Commented 2023年12月4日 12:07

1 件の回答 1

4

viewBox は SVG の座標系の中でどの部分を見せるかを指定するもので、静止画ならたいてい固定の値を書きます。デフォルトのサイズや縦横比に影響はありますが、HTMLページ中の表示される大きさを変更するためのものであはりません。
HTMLページ中での大きさを指定するのは <img> と大体同じで、width 属性、height 属性、width CSS プロパティ、height CSS プロパティなどです。

viewBox を適切に指定して、<svg>widthheight などを指定しなければ使える広さいっぱいに広がると思います。
viewBox 指定がないと HTML ページ中では 300x150 というサイズになります。

(もしそうならないなら、具体的なコードで質問してください)

追記:
<rect> がちょうどおさまるような viewBox を指定するだけでいいです。

<div style="width: 100%;background-color:green;">
  <svg viewBox="42.597706 42.440388 1598.741699 2298.899414">
    <rect x="42.597706" y="42.440388" style="fill:#d6eaff;" width="1598.741699" height="2298.899414"></rect> 
  </svg>
</div>

8
  • 疑問点を質問本文に追記しました
    – re9
    Commented 2023年12月6日 0:44
  • 試した結果どうだったのですか? 期待どおりにならなかったのでしょうか?
    – int32_t
    Commented 2023年12月6日 0:49
  • 試してみたのですが、期待通り表示されませんでした。svgタグの中に<rect x="42.597706" y="42.440388" style="fill:#d6eaff;" width="1598.741699" height="2298.899414"></rect>タグがあり、この範囲に表示が依存しているような印象を受けました。
    – re9
    Commented 2023年12月6日 1:01
  • 再現できる具体的なコードで質問するようお願いします。ちょっと回答の文面を更新します。
    – int32_t
    Commented 2023年12月6日 1:16
  • 2
    JavaScriptを使わないと無理だと思います。 こうやってあとから条件が出てくると回答の手間が増えるので、初めからすべての情報を出して質問していただけると助かります。
    – int32_t
    Commented 2023年12月7日 3:40

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。