Я пробовал много вариантов параметров svg, но не имел радости в масштабировании этого конкретного SVG.Масштабирование SVG в контейнер без маски/обрезки
Я пытаюсь содержать this SVG в элемент контейнера, который управляет размером SVG.
Я нацелен на 500x309px.
Какая комбинация width, height, viewBox и preserveAspectRatio может помочь мне достичь этого, не имея SVG замаскированы или обрезано?
Вы обязательно должны иметь атрибут viewBox на вашем SVG элемент, описывающий ограничивающий прямоугольник содержимого вы хотите всегда быть видимым. (Файл, который вы ссылаетесь на нет;. Вы хотите добавить один)
Чтобы вызвать вашу SVG для заполнения HTML-элемент, поместите CSS атрибут position:relative (или position:absolute или position:fixed в случае необходимости) на вашем обертке , а затем
Установите атрибут CSS position:absolute на свой элемент <svg>, чтобы заставить его сесть и заполнить ваш div. (В случае необходимости, также применяются left:0; top:0; width:100%; height:100%.)
После того, как у вас есть viewBox и ваш SVG правильно размер по умолчанию значение атрибута preserveAspectRatio будет делать то, что вы хотите. В частности, значение по умолчанию xMidYMid meet означает, что:
none допускает неравномерное масштабирование.meet либо сверху/снизу, либо влево/вправо, с «почтовым ящиком», сохраняющим другое измерение внутри. slice гарантирует, что ваш viewBox полностью заполняет рендеринг с верхним/нижним или левым/правым падением вне SVG.xMinYMax будет удерживать его в левом нижнем углу, с заполнением только справа или сверху.Вы можете увидеть это здесь жить: http://jsfiddle.net/Jq3gy/2/
Попробуйте указать явные значения для preserveAspectRatio на <svg> элемента и нажмите «Обновить», чтобы увидеть, как они влияют на визуализацию.
Edit: Я создал упрощенную версию US Map with a viewBox (почти половина байт) и используется, что в обновленной демо, чтобы удовлетворить ваши точные потребности: http://jsfiddle.net/Jq3gy/5/
Фантастический; Спасибо. – sgb
Чтобы уточнить мое сомнение, чтобы заполнить svg для содержащего div, вы попросили указать позицию абсолютную для svg. Но svg расширяется как по высоте, так и по ширине, без указания положения абсолюта на svg или позиции относительно контейнера div. (Проверено путем изменения примера эклипса) – rajkamal
Просто потрясающе. Использование этого с картой США напрямую связано с тем, с чем я хочу работать. Спасибо за понимание. – mikevoermans
К сожалению, я не знаю ответа, который относится к сырому SVG, но в Raphaël.js, я сделал это так:
var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);
Этот метод масштабируется мой SVG, чтобы соответствовать границы.
Надеюсь, что это поможет.
Установите ширину и высоту SVG быть размер его контейнера и set preserveAspectRatio = none.
<div height="50" width="100">
<svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>
и
$("svg").each(function(){
this.width = this.parentNode.width;
this.height = this.parentNode.height;
}
Вот так. Настройка CSS не требуется.
Я лично установил viewBox как размер содержимого SVG. Итак, в моем примере исходное изображение, которое я загружаю в свой SVG, составляет 300x200. Он будет сжиматься до 50x100. Но манипуляция viewBox - отдельная проблема.
Я предполагаю, что вы не хотите неравномерного масштабирования: вы не хотите, чтобы карта растягивалась или сквоша на основе контейнера. Если контейнер 1000x100, вы хотите, чтобы карта была высотой 100 пикселей; если 100x1000 вы хотите его шириной 100px. Верный? – Phrogz