如何設置svg的寬度和高度？

我有一個3 svg圖標與不同的viewBox值。如何設置svg的寬度和高度？

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"></svg> 
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"></svg>

我如何設置我的svg寬度和高度相同的值，所以這3個圖標都將具有相同的大小。如果你給他們同樣的width和height

<div> 
    <span> 
      <svg></svg> 
    </span> 
</div>

來源

2017-07-20 User1979

如何同尺寸？相同的寬度，或相同的高度？ –

所有這三個圖標將擴展到相同大小。較短的一個將以自己爲中心。

svg { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-color: blue; 
 
    background-color: yellow; 
 
}

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 
 
    <rect width="100%" height="100%"/> 
 
</svg> 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"> 
 
    <rect width="100%" height="100%"/> 
 
</svg> 
 
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> 
 
    <rect width="100%" height="100%"/> 
 
</svg>

如果通過「相同大小」，你的意思是相同的高度。然後只設置height，然後讓瀏覽器根據viewBox寬高比調整寬度。

svg { 
 
    height: 50px; 
 
    border-color: blue; 
 
    background-color: yellow; 
 
}

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 
 
    <rect width="100%" height="100%"/> 
 
</svg> 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"> 
 
    <rect width="100%" height="100%"/> 
 
</svg> 
 
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> 
 
    <rect width="100%" height="100%"/> 
 
</svg>

來源

2017-07-20 17:07:02

如何設置svg的寬度和高度？

回答

相關問題