如何在僞類中設置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圖像的大小？

回答

相關問題