在CSS中缩放SVG

2024-05-20 • 问答

我的样式表中有以下一行叫我的网站徽标。

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

如何缩小比例？我在学习有关viewPort和viewBox的知识，但似乎无法使其正常工作。

谢谢。

在viewBox文件中声明svg后，您绝对应该给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);
}