Bagaimana untuk Menambah Bar Skrol pada SVG untuk Penskalaan Responsif?

Menambahkan Bar Tatal pada SVG untuk Penskalaan Responsif

Dalam SVG, bar skrol meningkatkan interaktiviti pengguna dengan membenarkan navigasi melalui kandungan yang melebihi port pandangan. Untuk melaksanakan fungsi ini, beberapa pengubahsuaian diperlukan.

Seperti yang dinyatakan dalam isu ini, menambahkan atribut limpahan-x dan limpahan-y terus pada elemen SVG terbukti tidak berkesan. Sebaliknya, pendekatan yang berbeza diperlukan:

Jadikan SVG Lebih Besar daripada Bekas Div

Konfigurasikan elemen SVG menjadi lebih besar daripada bekas div induknya, menjadikan kandungan SVG dilanjutkan melampaui batas div. Dalam contoh:

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

Kendalikan Limpahan dalam Div

Tetapkan atribut limpahan untuk menatal dalam bekas div:

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

Ini mengkonfigurasi div untuk memaparkan bar skrol apabila kandungan SVG melimpah.

Laraskan Dimensi SVG

Ubah suai dimensi SVG agar sepadan dengan bekas, memastikan kandungan SVG sejajar dengan betul dalam div:

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

Dengan melaksanakan langkah-langkah ini, bar skrol akan ditambahkan pada elemen SVG, membolehkan pengguna menavigasi dan melihat kandungan yang melebihi saiz port pandangan.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Bar Skrol pada SVG untuk Penskalaan Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!