Как показать масштабированный SVG в псевдоэлементе?

Я хочу отобразить файл .svg внутри псевдоэлемента в CSS.

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

Я преобразовал этот файл .eps в .svg с Inkscape.
Это результат. Я считаю, что это верное преобразование.

<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, убрал высоту и с элементами и добавил viewBox="0 0 114.8625 114.8625". Также я использовал background-image и background-sizeas здесь предложено.


svg css pseudo-element
person Lucas    schedule 14.04.2014    source источник
comment
git.svg находится в том же каталоге, что и ваш файл CSS?   -  person James Donnelly    schedule 15.04.2014
comment
@JamesDonnelly да, это +, когда я пытаюсь использовать .png или что-то еще, что он отображается, поэтому путь в порядке.   -  person Lucas    schedule 15.04.2014

Ответы (1)


arrow_upward
13
arrow_downward

Вы должны иметь возможность использовать background и background-size для масштабирования изображения. Вам нужно установить размер псевдоэлемента и убедиться, что у него есть тип отображения, где вы можете установить ширину и высоту, например display: inline-block или display: block.

ДЕМО

.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;
}
person Mathias    schedule 15.04.2014
comment
Это не удается в ms edge - красная звезда не видна. Кроме того, в chrome (60), если вы увеличиваете масштаб до 100 пикселей, вы видите небольшой кусок другой копии красной звезды, искажающий нижнюю часть изображения. - person thund; 07.10.2017