Tornando o SVG responsivo
Tenho um SVG com o seguinte código. Eu gostaria de fazê-lo ter uma largura responsiva, e eu li que você não deve definir a largura e a altura na janela, mas quando eu removê-los o SVG desaparece. Como devo alterar isso para que o SVG vai redimensionar?
.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">
<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>
2
1 answers
Tente adicionar um elemento de contentor com uma largura definida em torno da sua SVG, removendo depois a largura e a altura. Deve encher o espaço.
Você também precisa aumentar a largura da janela para acomodar toda a forma.
<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;
}
9
Author: brenna, 2014-09-19 19:30:49