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

Posted 2023-03-15

【中文标题】如何控制svg元素的宽度和高度

【英文标题】：How to control the width and height of a svg element

【发布时间】：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;
`;

【参考方案1】：

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

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