Отзывчивый INLINE SVG - содержание SVG необходимо заполнить без родителя Ширина

Question

ЦЕЛЬ:

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

ПРОБЛЕМА:

я могу добиться этого в Firefox и с некоторыми ухищрений также в Chrome, но сафари и IE9 & IE10 не будет играть в мяч.

• Внутреннее содержание SVG не всегда заполнить элемент SVG во всех ширинах экрана
• WebKit добавляет таинственную обивку/высоту (в данном примере прокладка находится в пределах элемента SVG) Высотой SVG элемента должны быть автоматическим и обернуть внутренний контент SVG.

ГЛАВНЫЙ ВОПРОС:

Есть кросс браузера для решения отзывчивого INLINE SVG: Посмотреть пример в IE9 & 10 и -webkit-сафари и обратите внимание на Ненужную дополнительную высоту в пределах SVG элемента (голубой цвет).

http://jsfiddle.net/David_Knowles/9tUAd/

<div class="block">stuff</div> 
<div class="wrap"> 
    <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet"> 

     <rect x="0" y="0" width="550" height="350"/> 
     <polyline points="0,0 0,350 550,350"/> 
     <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">The text</text> 
    </svg> 
</div> 
<div class="block">stuff</div> 

Answer 1

Тип дисплея по умолчанию для рядный элементов SVG является display: inline;. Это означает, что элемент SVG помещается на типографскую базовую линию своего родителя и соответствующим образом выравнивается. Существует всегда какое-то пространство ниже базовой линии, чтобы разрешить оборванные биты символов типа g и j и т. Д.

Простая фиксация: svg { display: block;} или svg { display: inline-block; vertical-align: top; }.

Answer 2

Я не совсем уверен, что эффект, который вы пытаетесь достичь, но я думаю, что вы могли бы искать preserveAspectRatio = «xMinYMin срез»

Answer 3

Первая проблема в том, что вы устанавливаете ваш .svg-wrap DIV 100 % высота. 100% чего? В этом случае родительский элемент div является элементом body. Когда у вас есть контент уровня блока, который составляет 100% от высоты тела и других элементов в потоке, вы всегда будете иметь вертикальную полосу прокрутки. потому что у вас всегда будет содержимое 100% + ваших .stuff элементов. Точно так же, как общий совет, постоянное переполнение, подобное этому, должно быть подсказкой, что что-то неудобно в вашем css.

Продолжая дальше в DOM, объявление высоты 100% на вашем элементе svg вынуждает svg расшириться до чрезмерно высокой обертки. И это еще одна часть преступника.

Решение, которое я использую, включает в себя intrinsic ratios.CSS, как это:

.svg-wrap { 
    background-color:red; 
    height:0; 
    padding-top:63.63%; /* 350px/550px */ 
    position: relative; 
} 

svg { 
    background-color: cyan; 
    height: 100%; 
    display:block; 
    width: 100%; 
    position: absolute; 
    top:0; 
    left:0; 
} 

http://jsfiddle.net/pcEjd/

Испытано в последней, FF, Chrome, Safari, (хотя и не IE).

Недостатками этого подхода является то, что:

а) вы должны предвычислять отношения для всех ящиков или написать скрипт, который делает это. Не плохо.

b) вы не можете использовать border-box во всем мире с помощью селектора звездочек, или если вам нужно переопределить размер окна до content-box для ваших контейнеров svg. Выполнимо.

В качестве побочного примечания это, очевидно, не то, как должны работать вещи. Браузеры должны быть достаточно умны, чтобы просмотреть атрибут SVG viewBox, чтобы получить пропорции, вычислить вычисляемую ширину (после любых пределов максимальной ширины), а затем вычислить высоту.

Но в настоящее время это не так. Есть еще одна странная ошибка в Chrome, где добавление max-width:100% в svg создает ситуацию, когда svg всегда имеет размер до наименьшего отображаемого размера. Попробуйте загрузить эту скрипку в Chrome:

http://jsfiddle.net/ynmey/1/

вы не увидите их SVG на всех! Weird. Еще более странно, отмените объявление max-width в Dev Tools, а затем начните играть с шириной окна «результата» в jsfiddle. Возьмите его немного уже, затем шире, затем уже, затем шире. Обратите внимание, что после того, как svg получает подталкивание меньше, он не изменяет размер снова, когда область просмотра становится больше!

Это важно отметить, потому что:

* {max-width:100%} 

является общим (и вполне законны) адаптивный дизайн подход, и он в настоящее время наносит ущерб с SVG в Blink. На данный момент придерживайтесь собственных коэффициентов.

Answer 4

Мне удалось добиться согласованных результатов в браузерах Webkit/Gecko, установив значение height, отличное от auto или 0. В моем примере я использую 1%, но из того, что я могу сказать, может быть что угодно. Как-то это разрешает неправильную высоту в Webkit (из моих тестов, я думаю, auto неправильно устанавливает высоту SVG на 100% высота окна).

Я еще не тестировал это в IE. Пожалуйста, дайте мне знать, если это сработает.

http://jsfiddle.net/yXeru/