如何在伪元素中显示缩放的svg？

Question

我想在CSS中的伪元素中显示一个.svg文件。

.commit-status:before { 
    content: url('git.svg'); 
    margin-right: 7px; 
    font-family: 'FontAwesome'; 
    font-size: 100%; 
} 

我使用Inkscape将this .eps file转换为.svg。
这是输出。我认为这是一个有效的转换。

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="114.8625" 
    height="114.8625" 
    id="svg3031" 
    xml:space="preserve"><metadata 
    id="metadata3037"><rdf:RDF><cc:Work 
     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs 
    id="defs3035" /><g 
    transform="matrix(1.25,0,0,-1.25,0,114.8625)" 
    id="g3039"><g 
     transform="scale(0.1,0.1)" 
     id="g3041"><path 
     d="M 901.547,500.352 500.355,901.527 c -23.093,23.11 -60.566,23.11 -83.691,0 L 333.363,818.211 439.039,712.535 c 24.559,8.293 52.723,2.727 72.293,-16.847 19.688,-19.696 25.207,-48.102 16.699,-72.75 L 629.887,521.094 c 24.648,8.496 53.066,3.004 72.754,-16.711 27.5,-27.492 27.5,-72.059 0,-99.574 -27.52,-27.516 -72.078,-27.516 -99.61,0 -20.683,20.703 -25.801,51.097 -15.312,76.582 l -95,94.992 0,-249.969 c 6.699,-3.32 13.027,-7.742 18.613,-13.312 27.5,-27.497 27.5,-72.059 0,-99.598 -27.5,-27.488 -72.09,-27.488 -99.57,0 -27.5,27.539 -27.5,72.101 0,99.598 6.797,6.789 14.668,11.925 23.066,15.363 l 0,252.281 c -8.398,3.438 -16.25,8.531 -23.066,15.367 -20.828,20.821 -25.84,51.395 -15.157,76.977 L 292.426,777.285 17.3281,502.211 c -23.10544,-23.129 -23.10544,-60.602 0,-83.711 L 418.539,17.3242 c 23.098,-23.10545 60.559,-23.10545 83.691,0 L 901.547,416.641 c 23.117,23.113 23.117,60.605 0,83.711" 
     id="path3043" 
     style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g></g></svg> 

我读到视框元件，除去高度，并用元素和加入viewBox="0 0 114.8625 114.8625"。我还用background-image和background-size作为here建议。

Answer 1

您应该可以使用background和background-size来缩放图像。您需要设置伪元素的大小，并确保它具有可以设置宽度和高度的显示类型，如display: inline-block或display: block。

DEMO

.commit-status:before { 
    content: " "; 
    background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg'); 
    background-size: 10px; 
    background-size: contain; 
    width: 10px; 
    height: 10px; 
    display: inline-block; 
}