如何僅使用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內容的大小？

回答

相關問題