如何使用媒体查询调整 SVG 的大小？

【问题标题】：How to resize an SVG using media queries?如何使用媒体查询调整 SVG 的大小？
【发布时间】：2020-04-01 02:03:46
【问题描述】：

我知道你可以使用 viewBox 属性来正常调整它的大小，但是我如何在 CSS 中指定或选择该属性？

我当前的代码是：

@media only screen and (max-width: 767px) {
    svg {
        margin: 0 auto;
        width: 100%;
    }
}

我试图在页面中心获取 SVG 文档/动画，并在视口低于 767 像素时使其成为视口宽度的 100%。谢谢。

【问题讨论】：

你试过width: 100vw;吗？你能提供一个工作和最小的例子吗？

标签： html css svg

【解决方案1】：

身高：100%；宽度：100%：这就是所有需要的。

【讨论】：

【解决方案2】：

尝试使用 text-align: center 在 svg 周围添加一个包装器以使 svg 居中。使用@media screen and (max-width: 768px) {} 进行媒体查询。

HTML 代码：

<div class="svg-wrapper">
  <svg>
    <rect/>
  </svg>
</div>

CSS 代码：

.svg-wrapper {
  text-align: center;
}

svg,
rect {
  width: 100px;
  height: 100px;
}

@media screen and (max-width: 768px) {
  svg,
  rect {
    width: 100%;
  }
}

希望这会有所帮助！

【讨论】：