オーバーフローが機能しないときに SVG 要素にスクロールバーを追加する方法

SVG 要素のスクロールバーの不在を克服する

クエリは、複数のコンテンツ項目を含み、ビューボックス属性。 SVG 要素とそれを囲む div の両方にオーバーフロー属性を追加したにもかかわらず、スクロールバーは表示されないままになります。

解決策:

解決策は、SVG 要素をサイズよりも大きくすることです。 divコンテナ。この調整により、div でオーバーフローを管理し、スクロールバーを実装できるようになります。

jsfiddle の例を次に示します。

<code class="css">div#container {
  height: 400px;
  width: 400px;
  border:2px solid #000;
  overflow: scroll;
}
svg#sky {
  height: 100px;
  width: 1100px;
  border:1px dotted #ccc;
  background-color: #ccc;
}</code>

div のサイズを超えるように SVG のサイズを変更することで、オーバーフローが発生しなくなります。 SVG 内に含まれるようになりました。代わりに、コンテナを超えて拡張され、div のスクロール機能が引き継ぐことができます。

以上がオーバーフローが機能しないときに SVG 要素にスクロールバーを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。