У меня есть следующий div внутри <body>.Как изменить размер большого svg, чтобы поместиться внутри div
<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 отрезан от нужного размера.
мне было интересно о настройке 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/
странно, но я получаю Ошибка: недопустимое значение для
Я думаю дело на самом деле неверно, поэтому задайтесь вопросом, изменилось ли что-то немного с тем, как браузеры используют чувствительность к регистру и то, как он справляется. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio имеет допустимые значения. – Ian
Кажется, что не работает? Если я изменяю div width/height, размер отображаемого изображения не изменяется. –
SVG не будет масштабироваться, поскольку он не имеет Viewbox определен. ViewBox сообщает браузеру, каковы размеры содержимого. Без этого невозможно определить, насколько он должен быть увеличен или уменьшен до соответствия.
Это своего рода отказ от svg-edit. На самом деле это нужно добавить, в идеале.
Что вы можете попробовать, это загрузить SVG в Inkscape или другой редактор SVG, который должен добавить viewBox. В качестве альтернативы вы можете добавить один вручную, как и ответ Яна.
Можете ли вы добавить пример кода. Я получаю элемент svg, как изменить размер, это моя самая большая проблема –
Можете ли вы опубликовать [jsFiddle] (http://jsfiddle.net/)? Также расскажите нам о Snap.load(), похоже, что это async? –
http://jsfiddle.net/nahid/9zRR8/3/ – naheed
Вот старое сообщение, в котором обсуждаются проблемы с загрузкой svg в div с помощью Snap. http://stackoverflow.com/questions/20110422/load-svg-into-a-specific-div-with-snap-svg – TimSPQR