DIV コンテナでオーバーフローする SVG コンテンツのスクロールバーを有効にする方法

オーバーフローする SVG コンテンツのスクロールバーを有効にする方法

SVG (Scalable Vector Graphics) を使用すると、動的でインタラクティブなグラフィックを作成できます。ただし、SVG 要素に親コンテナのサイズを超える多数の要素が含まれている場合、オーバーフロー コンテンツを表示することが困難になる可能性があります。

SVG のオーバーフローの問題

デフォルトでは、SVG 要素は、コンテンツが要素の境界を越える場合にスクロールバーを自動的に表示しません。これにより、要素が切り取られたり非表示になったりして、見た目や使いやすさに影響を与える可能性があります。

解決策: Scroll を使用して DIV コンテナを活用する

この問題に対処するには、次のことが推奨されます。 SVG 要素の周囲に DIV コンテナを使用し、コンテナの CSS 内でスクロールを使用してオーバーフローを処理します。方法は次のとおりです。

• DIV コンテナの寸法を希望のサイズに設定し、SVG を表示する領域を定義します。
• DIV コンテナのオーバーフロー プロパティをスクロールに設定します。 。これにより、コンテンツがそのサイズを超えたときにコンテナ内でスクロールできるようになります。
• SVG 要素の寸法が DIV コンテナの寸法を超えていることを確認してください。これにより、オーバーフローが DIV の表示領域を超えて拡張されます。
• ユーザーがコンテンツを操作するとスクロールバーが動的に表示され、切り取られることなく SVG 全体を表示できるようになります。

例:

<code class="html"><div id="container">
  <!-- Set the desired dimensions and scroll behavior -->
  <svg id="sky">
    <!-- Set the SVG dimensions to exceed the container's -->
  </svg>
</div></code>

<code class="css">div#container {
  height: 400px;
  width: 400px;
  overflow: scroll;
}

svg#sky {
  height: 1100px;
  width: 1200px;
}</code>

この手法を実装すると、オーバーフローする SVG コンテンツのスクロールバーを有効にして、ユーザーが完全なグラフィックスを完全に操作して表示できるようにすることができます。 .

以上がDIV コンテナでオーバーフローする SVG コンテンツのスクロールバーを有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。