'How to properly scale svg?

I need create seats map. I create svg with seats.

<div class="seats-map">
<svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300">
<g data-row="1.0"><circle cx="100" cy="100" r="20" fill="red"></circle><circle cx="150" cy="100" r="20" fill="red"></circle><circle cx="200" cy="100" r="20" fill="red"></circle><circle cx="250" cy="100" r="20" fill="red"></circle><circle cx="300" cy="100" r="20" fill="red"></circle></g><g data-row="2.0"><circle cx="100" cy="150" r="20" fill="red"></circle><circle cx="150" cy="150" r="20" fill="red"></circle><circle cx="200" cy="150" r="20" fill="red"></circle><circle cx="250" cy="150" r="20" fill="red"></circle><circle cx="300" cy="150" r="20" fill="red"></circle></g><g data-row="3.0"><circle cx="100" cy="200" r="20" fill="red"></circle><circle cx="150" cy="200" r="20" fill="red"></circle><circle cx="200" cy="200" r="20" fill="red"></circle><circle cx="250" cy="200" r="20" fill="red"></circle><circle cx="300" cy="200" r="20" fill="red"></circle></g></svg>

Class "seats-map" has 1000px width and 400px height. I need to display svg in the center. And it should fit in these dimensions proportionally. Then I will add a zoom effect.

htmlcsssvg


Solution 1:[1]

You need to add CSS code to scale. like:

.seats-map:hover {
  transform: scale(2);
  transition: transform 0.5s;
}

.seats-map {
  transform: scale(1);
  transition: transform 0.5s;
  margin: auto;
  width: 200px;
  padding-right: -200dp;
}
<!DOCTYPE HTML>
<html>

<body>
  <div class="seats-map">
    <svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 400 300">
      <g data-row="1.0"><circle cx="100" cy="100" r="20" fill="red"></circle><circle cx="150" cy="100" r="20" fill="red"></circle><circle cx="200" cy="100" r="20" fill="red"></circle><circle cx="250" cy="100" r="20" fill="red"></circle><circle cx="300" cy="100" r="20" fill="red"></circle></g><g data-row="2.0"><circle cx="100" cy="150" r="20" fill="red"></circle><circle cx="150" cy="150" r="20" fill="red"></circle><circle cx="200" cy="150" r="20" fill="red"></circle><circle cx="250" cy="150" r="20" fill="red"></circle><circle cx="300" cy="150" r="20" fill="red"></circle></g><g data-row="3.0"><circle cx="100" cy="200" r="20" fill="red"></circle><circle cx="150" cy="200" r="20" fill="red"></circle><circle cx="200" cy="200" r="20" fill="red"></circle><circle cx="250" cy="200" r="20" fill="red"></circle><circle cx="300" cy="200" r="20" fill="red"></circle></g>
    </svg>
  </div>
</body>

</html>

and SVG's view box keeps width 400.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions