在 CSS 中缩放 SVG [重复]

【问题标题】：Scaling an SVG in CSS [duplicate]在 CSS 中缩放 SVG [重复]
【发布时间】：2020-03-14 19:44:33
【问题描述】：

我的样式表中有以下行调用我的网站徽标。

.navbar__logo::before{
    content: url("../images/logo/logo.svg");}

如何缩小这个范围？我正在学习一些关于 viewPort 和 viewBox 的知识，但似乎无法让它工作。

提前致谢。

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
快捷方式 css zoom:0.8

【解决方案1】：

在您的svg 文件中声明viewBox 后，您绝对应该明确给出pseudo-element width 和height：

.navbar__logo::before {
  content: url("../images/logo/logo.svg");
  width: 200px;
  height: 50px;
}

除此之外，如果您希望动态调整pseudo-element 的大小和/或动画缩放，您可以使用transform: scale()：

.navbar__logo::before {
  content: url("../images/logo/logo.svg");
  width: 200px;
  height: 50px;
  transform: scale(0.5);
}

【讨论】：