Как изменить размер большого svg для размещения внутри div

У меня есть следующий div внутри <body>.

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

Я хочу установить 640X480 svg внутри этого div. Я пробовал это:

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

Но svg отрезан от нужного размера.

Ответы

Ответ 1

Мне было интересно, как настроить viewBox для этого, поэтому что-то вроде...

<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/

Ответ 2

SVG не будет масштабироваться, потому что у него нет определенного вида viewBox. ViewBox сообщает браузеру, каковы размеры содержимого. Без этого невозможно определить, насколько он должен быть увеличен или уменьшен до уровня.

Это своего рода отказ от svg-edit. Это действительно должно быть добавление в идеале.

Что вы можете попробовать, это загрузить SVG в Inkscape или другой редактор SVG, который должен добавить viewBox. В качестве альтернативы вы можете добавить один из них вручную, в соответствии с ответом Яна.