Отзывчивый INLINE SVG - содержимое svg должно заполнять родительскую ширину

ЦЕЛЬ:

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

Проблема:

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

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

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

Есть ли кросс-браузерное решение для чувствительного INLINE SVG: Просмотрите пример в IE9 и 10 и -webkit-Safari и обратите внимание на необработанную дополнительную высоту в элементе 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>

Ответ 1

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

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

В используемом решении используются внутренние коэффициенты. 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).

Недостатки этого подхода заключаются в следующем:

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

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. На данный момент придерживайтесь собственных коэффициентов.

Ответ 2

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

Простое исправление: svg { display: block;} или svg { display: inline-block; vertical-align: top; }.

Ответ 3

Я не совсем уверен, какой эффект вы пытаетесь достичь, но я думаю, что вы можете искать preserveAspectRatio = "xMinYMin slice"

Ответ 4

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

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

http://jsfiddle.net/yXeru/