如何仅使用css调整svg内容的大小？

如何调整内联svg矢量作品，仅使用CSS，所以所有的作品都调整大小并完全适合其较小的定义宽度&高度？应该保留原始的aspectratio。在这种情况下，我希望图片内容能够以图标的形式调整为100x100px的框。下面的代码片段不起作用，因为它似乎是CROP窗口而不是调整内部内容的大小......什么CSS代码可以用于SVG？如何仅使用css调整svg内容的大小？

svg { 
 
    width: 100px; 
 
    height: 100px; 
 
    fill: blue; 
 
    background-color: red; 
 
}

<svg> 
 
\t <polygon points="100,0 30,200 200,70 0,70 170,200"/> 
 
</svg> 
 

 
<svg > 
 
\t <polygon points="0,0 200,140 110,200"/> 
 
</svg> 
 

 
<svg> 
 
\t <ellipse cx="200" cy="70" rx="200" ry="40" /> 
 
</svg>

来源

2017-03-30 Sam

有点生疏了这个，但你可能需要对SVG和高度的viewBox属性：在CSS自动保持比例 – Christopher

添加视框保持纵横比和设定为100％的高度和宽度，以填补SVG容器。

svg{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color: red; 
 
} 
 
svg * { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: blue; 
 
}

<svg viewbox="0 0 200 200"> 
 
    <polygon points="100,0 30,200 200,70 0,70 170,200"/> 
 
</svg> 
 

 
<svg viewbox="0 0 200 200"> 
 
    <polygon points="0,0 200,140 110,200"/> 
 
</svg> 
 

 
<svg viewbox="0 0 400 70"> 
 
    <ellipse cx="200" cy="70" rx="200" ry="40" /> 
 
</svg>

来源

2017-03-30 08:41:43 llobet

谢谢您的回答！你能解释'''svg *'中的星号是什么意思吗？那么'svg {}'和'svg * {}'有什么区别？ – Sam

也请解释为什么viewbox的数字是200而不是100.这是相对于它们包含的路径，换句话说，与在宽度/高度上显示的实际像素完全无关？ – Sam

我想包括你所有的路径，所以我把每个人的最高号码。 '*'在CSS中等于'所有元素'，所以如果你做'svg *'你选择svg中的所有元素。 – llobet

如何仅使用css调整svg内容的大小？

回答

相关问题