Изменение SVG высоты с помощью CSS

Question

Я хотел бы изменить высоту SVH с помощью CSS, но он не работает, в SVG работает, но прилагаемое CSS не работает ...

svg { 
 
    fill: red; 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 25px; 
 
} 
 

 
[class^=icon] { 
 
    height: 18px; 
 
    width: 1px; 
 
}

<svg> 
 
    <defs> 
 
    <g id="arrowBK"> 
 
     <path d="M18.837,12.777c-1.189,1.188-1.844,2.769-1.844,4.452c0,1.657,0.673,3.281,1.844,4.452l28.463,28.461L18.837,78.604 
 
    c-1.189,1.191-1.844,2.774-1.844,4.457s0.659,3.265,1.849,4.453C18.837,87.51,29.244,97.91,29.244,97.91 
 
    c1.181,1.188,2.766,1.844,4.452,1.844c1.683,0,3.262-0.652,4.452-1.844l43.312-43.316c1.191-1.188,1.844-2.77,1.844-4.452 
 
    c0-1.681-0.652-3.263-1.844-4.451L38.147,2.377c-1.19-1.189-2.769-1.844-4.452-1.844s-3.26,0.654-4.452,1.842L18.837,12.777z 
 
    M75.228,50.142L33.696,91.679c-1.947-1.947-6.683-6.679-8.626-8.622l30.244-30.243l2.671-2.672l-2.671-2.669L25.069,17.229 
 
    c1.948-1.943,6.683-6.676,8.626-8.62L75.228,50.142z"/> 
 
    </g> 
 
    </defs> 
 
    <use xlink:href="#arrowBK" class="icon-arrowBK"></use> 
 
</svg>

Answer 1

Вы можете использовать viewBox атрибут <svg>:

svg { 
 
    fill: red; 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 25px; 
 
} 
 

 
[class^=icon] { 
 
    height: 18px; 
 
    width: 1px; 
 
}

<svg width="200" height="200" viewBox="0 0 100 100"> 
 
    <defs> 
 
    <g id="arrowBK"> 
 
     <path d="M18.837,12.777c-1.189,1.188-1.844,2.769-1.844,4.452c0,1.657,0.673,3.281,1.844,4.452l28.463,28.461L18.837,78.604 
 
    c-1.189,1.191-1.844,2.774-1.844,4.457s0.659,3.265,1.849,4.453C18.837,87.51,29.244,97.91,29.244,97.91 
 
    c1.181,1.188,2.766,1.844,4.452,1.844c1.683,0,3.262-0.652,4.452-1.844l43.312-43.316c1.191-1.188,1.844-2.77,1.844-4.452 
 
    c0-1.681-0.652-3.263-1.844-4.451L38.147,2.377c-1.19-1.189-2.769-1.844-4.452-1.844s-3.26,0.654-4.452,1.842L18.837,12.777z 
 
    M75.228,50.142L33.696,91.679c-1.947-1.947-6.683-6.679-8.626-8.622l30.244-30.243l2.671-2.672l-2.671-2.669L25.069,17.229 
 
    c1.948-1.943,6.683-6.676,8.626-8.62L75.228,50.142z"/> 
 
    </g> 
 
    </defs> 
 
    <use xlink:href="#arrowBK" class="icon-arrowBK"></use> 
 
</svg>