如何在伪类中设置SVG图像的大小？

我想在CSS :before元素中显示图像。如何在伪类中设置SVG图像的大小？

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

的问题是，所述height和width被施加到元件，但SVG不按比例缩小。我如何将尺寸应用于之前创建的实际元素？

Plnkr例如：https://plnkr.co/edit/UgryaObojs6PCU579oGY

来源

2016-03-28 Jorn

这显然是因为'content'正在为静态图像处理，不作为动态SVG，因此不能通过CSS将其作为XML进行操作。无论出于何种原因，将svg文件设置为“背景图像”时反之亦然。退房http://stackoverflow.com/a/24026800/49478 – Anthony

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

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

这里是example

你也可以尝试使用这一个：

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

来源

2016-03-28 09:33:51 oboshto

您的示例在Chrome中可以缩放（要测试，请将所有125px的值设置为225px，然后查看图片的增长情况）。但是，在Edge和Explorer中没有缩放。 – thund

大多数浏览器不支持:after，:before上的img标签，但你可以创建一个高度和宽度的div，并给它一个background

Edit you Plunker

/* Styles go here */ 
.withimage:before { 
    content:""; 
    background: url(test.svg); 
    background-size: cover; 
    display: block; 
    width:20px; 
    height: 10px; 
} 
.withimage{ 
    background: pink; 
    height: 100px; 
    width: 100px; 
}

来源

2016-03-28 09:42:08 Gintoki

如何在伪类中设置SVG图像的大小？

回答

相关问题