如何擴大SVG

-1

我有這個SVG文件：如何擴大SVG

<svg version="1.1" id="archer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMax meet" x="0px" y="0px" 
    viewBox="0 0 63.3 88.4" style="enable-background:new 0 0 63.3 88.4;"> 
<style type="text/css"> 
<![CDATA[ 
    .st0{fill:#FFFFFF;} 
]]> 
</style> 
<path class="st0" d="M29.2,59l-2.1-1.5l1.1,0.7l-1.1-0.7c0-0.1,3.8-5.8,2.1-10.8c-1-3-3.9-5.3-8.5-6.8l0.8-2.5 
    c5.4,1.8,8.8,4.6,10.1,8.5C33.8,52.2,29.4,58.7,29.2,59"/> 
<path class="st0" d="M2,59.5l-0.3-2.6c0.1,0,6.1-0.8,9.3-5.4c2.1-3,2.6-7.1,1.5-12l2.5-0.6c1.3,5.7,0.7,10.5-1.9,14.1 
    C9.2,58.6,2.3,59.5,2,59.5"/> 
<path class="st0" d="M17.5,41.8C10.6,41.8,7.1,29.6,6.9,29c-0.8-4-0.6-11.7,6.4-13.3c0.2,0,5.1-1.1,8.5,1.6c2,1.6,3.1,4.1,3.2,7.4 
    c0.5,15-5.5,16.7-6.2,16.9C18.4,41.7,17.9,41.8,17.5,41.8 M15.7,18.1c-1.1,0-1.9,0.2-1.9,0.2C7.7,19.6,9.4,28,9.4,28.4 
    c0,0,3.5,11.9,8.9,10.7c0,0,4.5-1.4,4.1-14.3c-0.1-2.5-0.8-4.3-2.2-5.4C18.8,18.4,17,18.1,15.7,18.1"/> 

<path class="st0" d="M34.6,36.6l-1.9-1.7c0.5-0.5,11.5-13.1-0.3-28.9l2.1-1.6C47.5,25,34.8,36.5,34.6,36.6"/> 

<path class="st0" d="M15.5,14.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1c3.9,0,7.1,3.2,7.1,7.1C22.6,11,19.4,14.1,15.5,14.1 
    M15.5,2.6c-2.5,0-4.5,2-4.5,4.5c0,2.5,2,4.5,4.5,4.5c2.5,0,4.5-2,4.5-4.5C20,4.6,18,2.6,15.5,2.6"/> 
<path class="st0" d="M6.7,23.7c-0.1,0-0.3,0-0.4-0.1l-5.4-1.9c-0.7-0.2-1-1-0.8-1.7c0.2-0.7,1-1,1.7-0.8l5.4,1.9 
    c0.7,0.2,1,1,0.8,1.7C7.7,23.4,7.2,23.7,6.7,23.7"/> 
<path class="st0" d="M41.2,21.8H1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h39.9c0.7,0,1.3,0.6,1.3,1.3 
    C42.5,21.2,41.9,21.8,41.2,21.8"/> 
</svg>

的問題是，我的SVG渲染這樣的：

有圖中下方的空白，我想知道如何縮放以適應容器。

感謝您的幫助

來源

2017-03-03 Corentin Branquet

哪來的CSS，JavaScript和HTML代碼？ –

更改您的viewBox的大小：

例如viewBox="0 0 60 62"

工作實例：

body { 
 
background-color: rgb(0,0,0); 
 
} 
 

 
svg { 
 
width: 128px; 
 
height: 176px; 
 
margin-right: 24px; 
 
border: 1px solid rgb(255,255,255); 
 
vertical-align: top; 
 
} 
 

 
svg:nth-of-type(2) { 
 
height: 140px; 
 
overflow: hidden; 
 
}

<svg version="1.1" id="archer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMax meet" x="0px" y="0px" 
 
    viewBox="0 0 63.3 88.4" style="enable-background:new 0 0 63.3 88.4;"> 
 
<style type="text/css"> 
 
<![CDATA[ 
 
    .st0{fill:#FFFFFF;} 
 
]]> 
 
</style> 
 
<path class="st0" d="M29.2,59l-2.1-1.5l1.1,0.7l-1.1-0.7c0-0.1,3.8-5.8,2.1-10.8c-1-3-3.9-5.3-8.5-6.8l0.8-2.5 
 
    c5.4,1.8,8.8,4.6,10.1,8.5C33.8,52.2,29.4,58.7,29.2,59"/> 
 
<path class="st0" d="M2,59.5l-0.3-2.6c0.1,0,6.1-0.8,9.3-5.4c2.1-3,2.6-7.1,1.5-12l2.5-0.6c1.3,5.7,0.7,10.5-1.9,14.1 
 
    C9.2,58.6,2.3,59.5,2,59.5"/> 
 
<path class="st0" d="M17.5,41.8C10.6,41.8,7.1,29.6,6.9,29c-0.8-4-0.6-11.7,6.4-13.3c0.2,0,5.1-1.1,8.5,1.6c2,1.6,3.1,4.1,3.2,7.4 
 
    c0.5,15-5.5,16.7-6.2,16.9C18.4,41.7,17.9,41.8,17.5,41.8 M15.7,18.1c-1.1,0-1.9,0.2-1.9,0.2C7.7,19.6,9.4,28,9.4,28.4 
 
    c0,0,3.5,11.9,8.9,10.7c0,0,4.5-1.4,4.1-14.3c-0.1-2.5-0.8-4.3-2.2-5.4C18.8,18.4,17,18.1,15.7,18.1"/> 
 

 
<path class="st0" d="M34.6,36.6l-1.9-1.7c0.5-0.5,11.5-13.1-0.3-28.9l2.1-1.6C47.5,25,34.8,36.5,34.6,36.6"/> 
 

 
<path class="st0" d="M15.5,14.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1c3.9,0,7.1,3.2,7.1,7.1C22.6,11,19.4,14.1,15.5,14.1 
 
    M15.5,2.6c-2.5,0-4.5,2-4.5,4.5c0,2.5,2,4.5,4.5,4.5c2.5,0,4.5-2,4.5-4.5C20,4.6,18,2.6,15.5,2.6"/> 
 
<path class="st0" d="M6.7,23.7c-0.1,0-0.3,0-0.4-0.1l-5.4-1.9c-0.7-0.2-1-1-0.8-1.7c0.2-0.7,1-1,1.7-0.8l5.4,1.9 
 
    c0.7,0.2,1,1,0.8,1.7C7.7,23.4,7.2,23.7,6.7,23.7"/> 
 
<path class="st0" d="M41.2,21.8H1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h39.9c0.7,0,1.3,0.6,1.3,1.3 
 
    C42.5,21.2,41.9,21.8,41.2,21.8"/> 
 
</svg> 
 

 

 
<svg version="1.1" id="archer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMax meet" x="0px" y="0px" 
 
    viewBox="0 0 60 62" style="enable-background:new 0 0 63.3 88.4;"> 
 
<style type="text/css"> 
 
<![CDATA[ 
 
    .st0{fill:#FFFFFF;} 
 
]]> 
 
</style> 
 
<path class="st0" d="M29.2,59l-2.1-1.5l1.1,0.7l-1.1-0.7c0-0.1,3.8-5.8,2.1-10.8c-1-3-3.9-5.3-8.5-6.8l0.8-2.5 
 
    c5.4,1.8,8.8,4.6,10.1,8.5C33.8,52.2,29.4,58.7,29.2,59"/> 
 
<path class="st0" d="M2,59.5l-0.3-2.6c0.1,0,6.1-0.8,9.3-5.4c2.1-3,2.6-7.1,1.5-12l2.5-0.6c1.3,5.7,0.7,10.5-1.9,14.1 
 
    C9.2,58.6,2.3,59.5,2,59.5"/> 
 
<path class="st0" d="M17.5,41.8C10.6,41.8,7.1,29.6,6.9,29c-0.8-4-0.6-11.7,6.4-13.3c0.2,0,5.1-1.1,8.5,1.6c2,1.6,3.1,4.1,3.2,7.4 
 
    c0.5,15-5.5,16.7-6.2,16.9C18.4,41.7,17.9,41.8,17.5,41.8 M15.7,18.1c-1.1,0-1.9,0.2-1.9,0.2C7.7,19.6,9.4,28,9.4,28.4 
 
    c0,0,3.5,11.9,8.9,10.7c0,0,4.5-1.4,4.1-14.3c-0.1-2.5-0.8-4.3-2.2-5.4C18.8,18.4,17,18.1,15.7,18.1"/> 
 

 
<path class="st0" d="M34.6,36.6l-1.9-1.7c0.5-0.5,11.5-13.1-0.3-28.9l2.1-1.6C47.5,25,34.8,36.5,34.6,36.6"/> 
 

 
<path class="st0" d="M15.5,14.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1c3.9,0,7.1,3.2,7.1,7.1C22.6,11,19.4,14.1,15.5,14.1 
 
    M15.5,2.6c-2.5,0-4.5,2-4.5,4.5c0,2.5,2,4.5,4.5,4.5c2.5,0,4.5-2,4.5-4.5C20,4.6,18,2.6,15.5,2.6"/> 
 
<path class="st0" d="M6.7,23.7c-0.1,0-0.3,0-0.4-0.1l-5.4-1.9c-0.7-0.2-1-1-0.8-1.7c0.2-0.7,1-1,1.7-0.8l5.4,1.9 
 
    c0.7,0.2,1,1,0.8,1.7C7.7,23.4,7.2,23.7,6.7,23.7"/> 
 
<path class="st0" d="M41.2,21.8H1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h39.9c0.7,0,1.3,0.6,1.3,1.3 
 
    C42.5,21.2,41.9,21.8,41.2,21.8"/> 
 
</svg>

來源

2017-03-03 13:04:52 Rounin

回答

相關問題