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

Question

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

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

我转换了 this .eps file使用 Inkscape 生成 .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 元素，删除了 height 和 with 元素并添加了 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;
}