css - 使用 CSS 更改 SVG 高度

Question

我想使用 CSS 更改 SVG 高度，但它不起作用，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>