Css 如何设置SVG图像的大小：在伪类之前？

我想在CSS

：before

元素中显示图像

.withimage:before {
  content: url(path/to/image.svg);
  display: block;
  height: 20px;
  width: 20px;
}

问题是，将

高度

和

宽度

应用于元素，但SVG不会按比例缩小。如何将大小应用于以前创建的实际图元

---

Plnkr示例：

您可以使用svg作为背景图像：

.withimage:before {
  content: "";
  display:block;
  height:125px;
  width:125px;
  background-size: 125px 125px;
  background-image: url(test.svg);
  background-repeat: no-repeat;
}

这是

您也可以尝试使用此选项：

.withimage:before {
  content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    display:block;
    height:20px;
    width:20px;
}

.withimage:before{
内容：url（“数据：image/svg+xml；utf8，大多数浏览器不支持img标签上的
：after
，
：before
，但您可以创建一个具有高度和宽度的
div
，并为其提供
背景


有时出于某些原因，我们不想使用背景图像。我遇到了与您相同的问题，无论SVG的宽度和高度如何，它都不会生效。原因是SVG缺少一个viewBox

我刚刚在内容和violá！的列表中添加了viewBox='0 0 16 16'。
缩放变换对我有效：

::before {
    content: url(path/to/image.svg); // source image is 24px wide
    transform: scale(0.5);           // will be rendered 12px wide
  }

这显然是因为
内容
是作为静态图像处理的，而不是作为动态SVG处理的，因此无法通过CSS将其作为XML进行操作。无论出于何种原因，当将SVG文件设置为
背景图像
时，情况正好相反。请在Chrome中查看您的示例scales ok（要进行测试，请将所有125px设置为225px，然后查看图像的增长情况）。但是，在Edge和Explorer中没有缩放功能。这可能是调整图像大小最灵活、最可靠的方法
::before {
    content: url(path/to/image.svg); // source image is 24px wide
    transform: scale(0.5);           // will be rendered 12px wide
  }