CODEWITHSUNDEEP
htmlcsssvg
rockpang
rockpang

Reputation: 27

Cannot zoom SVG in an HTML file

I am writing a simple index.html page and containing only an SVG graph followed by a table. However, when I display the HTML, using command+Plus, I am unable to zoom the SVG (but I can zoom the table).

I have tried using <img>, <object>, and <iframe> as suggested here. Note that the width and height of the SVG are kind of big (they are both 3000).

<body>
   <div class="main-wrapper">
     <img src="graph.svg" style="width:100%; height: auto">

     <table class="container">
          <tr>
            <th>value1</th>
            <td>1</td>
          </tr>
          <tr>
            <th>value2</th>
            <td>2</td>
          </tr>
          <tr>
            <th>value3</th>
            <td>3</td>
          </tr>
     </table>
   </div>
</body>

.main-wrapper{
   height: 100vh;
   weight: 100vw;
}

Upvotes: 1

Views: 1695

Answers (1)

collapsar
collapsar

Reputation: 17258

Apply the css styling to the underlying svg instead of the img element:

img svg  {
   height: auto;
   width: 100%;
}

and

...
<img src="graph.svg">
...

Live Demo at jsfiddle (with another svg, of course).

Caveat

The solution might depend on the structure of the referenced svg.

Upvotes: 1

Related Questions