レスポンシブ スケーリングのために SVG にスクロールバーを追加するにはどうすればよいですか?

応答性の高いスケーリングのために SVG にスクロールバーを追加する

SVG では、スクロールバーにより、ビューポートを超えるコンテンツ間のナビゲーションが可能になり、ユーザーの対話性が向上します。この機能を実装するには、いくつかの変更が必要です。

問題で述べたように、overflow-x 属性と overflow-y 属性を SVG 要素に直接追加することは効果がありません。代わりに、別のアプローチが必要です。

SVG を Div コンテナより大きくする

SVG 要素を親 div コンテナよりも大きく構成し、SVG コンテンツを拡張します。 div の範囲を超えています。例では:

<code class="html"><div id="container">
  <svg id="sky">
    ...
  </svg>
</div></code>

Div のオーバーフローを処理します

div コンテナーでスクロールするオーバーフロー属性を設定します:

<code class="css">div#container {
  overflow: scroll;
}</code>

This SVG コンテンツがオーバーフローしたときにスクロールバーを表示するように div を設定します。

SVG の寸法を調整

コンテナに一致するように SVG の寸法を変更し、SVG コンテンツがコンテナ内で適切に配置されるようにします。 div:

<code class="css">svg#sky {
  width: 1100px;
  height: 100px;
}</code>

これらの手順を実装すると、SVG 要素にスクロールバーが追加され、ユーザーがビューポート サイズを超えるコンテンツを移動して表示できるようになります。

以上がレスポンシブ スケーリングのために SVG にスクロールバーを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。