tamaño propiedades hacer escalar efectos efecto cambiar bootstrap javascript html css svg snap.svg

javascript - propiedades - cómo cambiar el tamaño de un svg grande para caber dentro de un div



escalar canvas html5 (2)

El SVG no se escalará porque no tiene un viewBox definido. El viewBox le dice al navegador cuáles son las dimensiones del contenido. Sin él, no hay forma de determinar cuánto se debe aumentar o reducir para que se ajuste.

Esto es una especie de falla de svg-edit. Realmente debería estar agregando uno, idealmente.

Lo que podrías intentar es cargar el SVG en Inkscape u otro editor de SVG que debería agregar un viewBox. Alternativamente, puede agregar uno manualmente, según la respuesta de Ian.

Tengo el siguiente div dentro <body> .

<div style="width:320px; height:480px;"> <svg id="svg1"></svg> </div>

Quiero encajar un svg 640X480 dentro de esta div. He intentado esto:

var paper=Snap("#svg1"); Snap.load("somesvg.svg",function(f){ paper.append(f); }); paper.attr({ width:320, height:480 })

Pero el svg está cortado del tamaño correcto.


Me preguntaba acerca de cómo ajustar el viewBox para esto, así que algo como ...

<div style="width:320px; height:480px;"> <svg id="svg1" width="100%" height="100%" viewBox="0 0 640 480" preserveAspectRatio="xMaxYMax"></svg> </div>

jsfiddle http://jsfiddle.net/9zRR8/5/