使用样式化组件 mediaquery 更改 svg 尺寸不会更新 viewBox

Question

例子

import styled from 'styled-components';
import { ReactComponent as SvgLogoUnstyled } from 'src/assets/svg/logo.svg';
const SvgLogo = styled(SvgLogoUnstyled)`
  height: 40px;
  width: 40px;

  @media (max-width:1427px){
    width: 17px;
    height: 17px;
  }
`;
export default SvgLogo;

更改屏幕大小时，svg viewBox 保持在 40px，但被裁剪为 17px。在 html css 中不会发生这种情况。 viewBox 和尺寸都得到更新。

任何人都可以建议修复吗？

注意：使用变换比例 - 不能解决此问题，因为它会将宽度保持在 40px，这会增加不必要的边距，而我确实需要将徽标设置为 17px 宽度。

 transform: scale(0.42); /*17 / .4*/

我设法修改了一点，但它很丑

  @media (max-width:1427px){
    transform: scale(0.42);    /* transform: scale(0.42); /*17 / .4*/
    margin: 0 -12px 0 4px;     /* added minus margin to reset ( (40 - 17) / 2)*/
    box-sizing: content-box;   /*  enable expansion without cropping if additional margin top/bottom*/
  }

Answer 1

好的，结果很简单。
我正在使用 css 设置宽度和高度并在 mediaquery 上更改它，但实际的 svg 本身有一个宽度和高度。简单地从 svg 中删除宽度和高度，但保留 viewBox，确保 svg 保持其纵横比。在这里回答：https://css-tricks.com/scale-svg/

向前看，在创建 svg 时，在插入 html 之前删除它们的宽度、高度属性，并始终使用 css 设置尺寸。

使用样式化组件 mediaquery 更改 svg 尺寸不会更新 viewBox

Changing svg dimensions with styled component mediaquery does not update viewBox

svg

media-queries

styled-components