Автоматически масштабировать SVG до его родителя

Я пытаюсь получить SVG для автоматического масштабирования и в соответствии с вертикально в свой родительский контейнер.Автоматически масштабировать SVG до его родителя

SVG имеет подпись, и я хочу, чтобы она сжималась вертикально, чтобы зафиксировать в рассматриваемом div. Как только это произойдет, ширина div всегда будет более чем достаточно большой, чтобы разместить остальную часть svg.

Скрипка у меня есть, а разметка внизу.

http://jsfiddle.net/3v4e4/2/

Просто возиться с ним, похоже, установив viewBox равным «0,0,1100,100» о праве, но я не могу за жизнь мне обобщать правила для вычисления что.

<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;"> 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 80 c 0.11 -0.19 3.59 -7.64 6 -11 c 5.2 -7.24 11.51 -13.76 17 -21 c 1.92 -2.53 3 -5.62 5 -8 c 6.6 -7.87 14.55 -15.43 21 -23 c 0.93 -1.09 1.95 -4.23 2 -4 c 0.14 0.71 -0.63 9.58 0 14 c 0.66 4.6 2.28 9.6 4 14 c 1.22 3.11 3 6.5 5 9 c 1.79 2.23 4.59 4.25 7 6 c 1.17 0.85 2.68 1.83 4 2 c 3.55 0.44 8.37 0.86 12 0 c 7.09 -1.67 14.75 -6.24 22 -8 c 4.65 -1.13 15 -1 15 -1"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 21 52 c 0.12 -0.07 4.58 -3 7 -4 c 3.13 -1.29 6.72 -2.51 10 -3 c 3.14 -0.47 10 0 10 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 108 64 c -0.02 -0.75 -0.75 -28.06 -1 -43 c -0.09 -5.56 -0.26 -10.84 0 -16 c 0.07 -1.33 0.21 -3.74 1 -4 c 2.11 -0.7 7.51 -0.39 11 0 c 2.31 0.26 4.63 1.58 7 2 c 3.27 0.58 6.88 0.08 10 1 c 11.18 3.3 23.97 7.93 34 12 c 1.18 0.48 2.27 1.86 3 3 c 2.16 3.35 4.65 7.3 6 11 c 1.2 3.3 1.61 7.33 2 11 c 0.28 2.63 0.68 5.63 0 8 c -1.82 6.37 -4.98 13.73 -8 20 c -1.21 2.51 -2.98 5.17 -5 7 c -5.02 4.56 -11.2 9.21 -17 13 c -2.67 1.75 -5.93 3.14 -9 4 c -5.08 1.42 -10.52 2.26 -16 3 c -7.11 0.96 -13.85 1.58 -21 2 l -13 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 185 85 c 0.1 -0.26 4.17 -9.78 6 -15 c 2.97 -8.48 4.86 -16.77 8 -25 c 2.24 -5.89 5.71 -11.27 8 -17 c 1.01 -2.51 1.01 -6.02 2 -8 c 0.43 -0.86 2.4 -2.3 3 -2 c 1.31 0.65 3.69 3.81 5 6 c 3.61 6.01 7.11 12.56 10 19 c 1.4 3.13 2.26 6.59 3 10 c 0.93 4.3 0.84 8.79 2 13 c 3.16 11.44 11 34 11 34"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 247 78 c 0.04 -0.05 2 -2.16 2 -3 c 0 -1.04 -1.01 -3.46 -2 -4 c -2.03 -1.11 -6.17 -0.95 -9 -2 c -6.05 -2.24 -11.84 -5.89 -18 -8 c -6.45 -2.21 -13.17 -3.73 -20 -5 c -7.69 -1.43 -23 -3 -23 -3"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 280 87 c 0.04 -0.32 1.03 -11.97 2 -18 c 0.72 -4.44 2.28 -8.54 3 -13 c 1.31 -8.08 1.67 -16.57 3 -24 c 0.25 -1.37 1.71 -2.7 2 -4 c 0.32 -1.46 -0.11 -5.14 0 -5 c 0.2 0.27 2.38 6.09 3 9 c 0.33 1.54 -0.35 3.42 0 5 c 3.87 17.56 11.56 49.11 13 54 c 0.09 0.32 1.93 -1.97 2 -3 c 0.8 -11.75 -0.18 -27.39 1 -41 c 0.82 -9.44 3.67 -24.16 5 -28 c 0.21 -0.6 3.43 0.92 4 2 c 4.46 8.42 9.16 21.76 14 32 c 0.69 1.47 2.39 2.63 3 4 c 0.62 1.4 0.27 3.58 1 5 c 4.32 8.37 10.8 17.06 15 26 c 3.4 7.25 8 23 8 23"/></svg> 
</div>

источник

2013-10-04 Adam Rackis

Для масштабирования svg на работу вы должны обязательно предоставить viewBox, который соответствует ограничивающей рамке содержащихся элементов. В вашем случае это будет что-то вроде viewBox="0 0 360 100".

Ограничительная коробка может быть рассчитана с помощью javascript, но, как я прочитал, в некоторых случаях метод getBBox() является ошибкой. Я не могу дальше комментировать это, но в этом случае и на хроме он работает, см: http://jsfiddle.net/3v4e4/7/

Обратите внимание, что оба getBBox() и setAttribute() являются нативными методами и установки Viewbox Вы абсолютно должны использовать их. Использование метода jquery'.attr() `не будет работать, поскольку SVG DOM отличается от HTML DOM, для которого jquery предназначен для: http://keith-wood.name/svg.html#dom

источник

2013-10-04 22:16:12 Gigo

Ahh - Я вижу, что вы сделали. Благодаря! так ли getBBox родной? –

Спасибо за редактирование. Да, я заметил это о setAttribute. Любая идея, почему IE8 дает мне «SCRIPT438: Объект не поддерживает свойство или метод« getBBox »? –

@AdamRackis, потому что IE8 не поддерживает SVG. Что вы используете в качестве резерва? – Duopixel

Если вы используете современный браузер, вы могли бы просто использовать SVG как СРК в течение IMG и установить высоту до 100%.

Пример: http://jsfiddle.net/kj7Wh/

<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;"> 
    <img src="http://openclipart.org/people/StefanvonHalenbach/StefanvonHalenbach_Battle_axe_medieval.svg" height="100%" /> 
</div>

источник

2013-10-04 21:43:45

не может работать везде, но команда масштабирования на элемент SVG

svg{zoom:32%;}

или, вы можете сохранить это как файл SVG и редактировать этот внутренний иллюстратор

источник

2013-10-04 21:58:53

Автоматически масштабировать SVG до его родителя

ответ

Смежные вопросы