scss svg mixin

svg.jsx

//svg 的 `preserveAspectRatio` 和 `viewBox` 属性无法用 css 设定，下面是 `jsx`辅助
const svg = (
  width: 100, $height: 100, // 元素区尺寸 w h
  adaption: contain, // 适配方式 contain cover fill
  src: src,
) => (
  <svg preserveAspectRatio={{
    "contain":"xMinYMin meet",
    "cover":"xMinYMin slice",
    "fill":"none",
  }[adaption]} viewBox={`0 0 $width $height`}>
    <image xlink:href={src}></image>
  </svg>
)

svg.scss

//svg(0, 0, 100, 100, contain, 50%, 50%)
@mixin svg(
  $x: 0, $y: 0, // 元素区坐标 x y
  $width: 100, $height: 100, // 元素区尺寸 w h
  $adaption: contain, // 适配方式 contain cover fill
  $horizontal: 50%, $vertical: 50% // 适配区对齐 m n
) {
  $v: 1080; // 适配区宽 v
  $g: 1920; // 适配区高 g

  position: absolute;
  width: percentage($width/$v);
  height: percentage($height/$g);
  overflow: visible;

  @if($adaption == fill) {
    left: percentage($horizontal*$v/$width);
    top: percentage($vertical*$g/$height);
  }
  @else {
    left: 0;
    top: 0;
    transform:
      translateX($horizontal*$v/$width)
      translateY($vertical*$g/$height);

    image {
      transform:
        translateX(($x - $horizontal*$v)/$width)
        translateY(($y - $vertical*$g)/$height);
    }
  }
}