如何正确缩放 svg？答案

【问题标题】：How to properly scale svg?如何正确缩放 svg？
【发布时间】：2021-09-28 10:11:17
【问题描述】：

我需要创建座位图。我用座位创建 svg。

<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>

类“seats-map”的宽度为 1000 像素，高度为 400 像素。我需要在中心显示 svg。它应该按比例适合这些尺寸。然后我会添加一个缩放效果。

【问题讨论】：

标签： html css svg

【解决方案1】：

您需要添加 CSS 代码以进行缩放。喜欢：

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

.seats-map {
  transform: scale(1);
  transition: transform 0.5s;
  margin: auto;
  width: 200px;
  margin-top: calc(50vh - 5%);
  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>

并且 SVG 的视图框保持宽度为 400。

【讨论】：

不，它会削减 svg 我需要相对于高度按比例减少或增加它。