使SVG響應

Question

我有一個SVG與下面的代碼。我想讓它具有響應寬度，並且我已經讀過，您不應該在視口上設置寬度和高度，但是當我刪除它們時，SVG會消失。我應該如何改變這個以便SVG將調整大小？

.thumb_arrow{ 
 
    z-index: 1000; 
 
    background-size: 100% 100%; 
 
    float: right; 
 
    position:relative; 
 
    bottom: 2rem; 
 
    left:2rem; 
 
    margin-right:1rem; 
 
    @media (min-width: @screen-medium) { 
 
    margin-right: 15rem; 
 
    } 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10em" height="10em"viewBox="0 0 50 100" enable-background="new 0 0 73.672 275.734" xml:space="preserve"> 
 
\t \t <path fill="#ABABAB" d="M59.717,50.177c0-13.252-3.631-25.945-10.495-36.82l2.998-1.873L39.891,0.667l4.318,15.823l3.1-1.937 c6.64,10.515,10.152,22.797,10.152,35.624c0,12.927-3.56,25.284-10.294,35.848l-2.959-1.849L39.891,100L52.22,89.183l-3.14-1.962 C56.037,76.298,59.717,63.529,59.717,50.177z"/> 
 
</svg>

Answer 1

嘗試添加容器元件與周圍的SVG已定義寬度，然後除去寬度和高度。它應該填補空間。

您還需要增加viewBox的寬度以適應整個形狀。

<div class="svg-container"> 
    <svg viewBox="0 0 60 100"> 
     <path fill="#ABABAB" d="M59.717,50.177c0-13.252-3.631-25.945-10.495-36.82l2.998-1.873L39.891,0.667l4.318,15.823l3.1-1.937 c6.64,10.515,10.152,22.797,10.152,35.624c0,12.927-3.56,25.284-10.294,35.848l-2.959-1.849L39.891,100L52.22,89.183l-3.14-1.962 C56.037,76.298,59.717,63.529,59.717,50.177z"/> 
    </svg>  
</div> 

.svg-container { 
    width: 10em; 
}