2012-03-01 16 views
5

que tienen código como este:¿Cómo puedo cambiar el tamaño de un SVG?

<span> 
    <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> 
     <desc></desc> 
     <defs/> 
     <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> 
     </svg>&nbsp; 
    </span> 

corté la mayor parte del contenido y lo reemplazó con ...

Esta actualmente crea un 32 un 32 icono. Lo que me gustaría saber es si puedo usar este código para crear un ícono de 100 por 100? Traté de cambiar el ancho y la altura, pero no hizo ninguna diferencia.

Respuesta

12

Los atributos width y height en el elemento SVG solo definen el tamaño del área de dibujo. No escalan los contenidos para adaptarse a esa área. Para ello, es necesario utilizar también el atributo viewBox, así:

<svg viewBox="0 0 32 32" height="100" width="100" ...> 

El atributo viewBox establece el sistema de coordenadas que se utiliza para todos los elementos secundarios del SVG. Puede usar el ancho y alto para estirar este sistema de coordenadas al tamaño deseado.

Usted puede utilizar el atributo preserveAspectRatio para decidir la forma de escalar si las relaciones de aspecto no coinciden.

+0

Cuando el ancho del svg es mayor que el del punto de vista, parece que no funciona. Tengo mejores resultados con widged

+0

@widged, no debería haber ninguna diferencia entre 'style' vs.' width' y 'altura '. Por lo tanto, la única diferencia que puedo ver entre su SVG y el mío es que desea escalar un SVG grande _down_ al tamaño del icono, mientras que la pregunta que se hace es acerca de escalar _up_ un SVG del tamaño de un icono. El método sigue siendo el mismo. – mercator

+0

Ayer tuve algunos comportamientos extraños que no puedo reproducir hoy. Posiblemente algún error tipográfico involucrado. La demostración simple en http://bl.ocks.org/widged/8428059 muestra que la reducción de personal funciona de la misma manera con el atributo de tamaño o el estilo. – widged

Cuestiones relacionadas