如何控制svg元素的宽度和高度答案

【问题标题】：How to control the width and height of a svg element如何控制svg元素的宽度和高度
【发布时间】：2021-04-03 13:54:47
【问题描述】：

我创建了一个具有自定义宽度和高度的 div 包装器，然后将 SVG 放入包装器中，但宽度和高度没有被修改，在这种情况下如何控制宽度和高度？

export const SvgWrapper = styled.div`
  width: ${(props) => props.width && props.width};
  height: ${(props) => props.height && props.height};
  padding-bottom: ${(props) => props.paddingBottom && props.paddingBottom};
`;

【问题讨论】：

标签： javascript reactjs svg styled-components

【解决方案1】：

与普通 CSS 一样，您需要使用 CSS 选择器来定位 SVG，您目前仅对 div 元素应用样式。

export const SvgWrapper = styled.div`
  svg {
    width: ${(props) => props.width};
    height: ${(props) => props.height };
    padding-bottom: ${(props) => props.paddingBottom};
  }
`;

【讨论】：