Ширина SVG не заполняется на странице

У меня проблема с шириной SVG (ширина страницы). При масштабировании моего окна создается зазор, а при масштабировании SVG снова заполняется полной шириной. Экран - это изображение левого конца окна браузера.Ширина SVG не заполняется на странице

Left end of the browser window

SVG:

<svg class="line line-top" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1280 50"> 
    <polygon points="0 0 1280 0 1280 0 0 50"/> 
</svg>

Вы можете увидеть его в этом fiddle попробуйте изменить высоту Viewbox и разрыв проблема начинает получать меньше.

Любые идеи?

источник

2014-12-10 Nick Noordijk

Выглядит хорошо для меня в Chrome – Ian

@Ian Попробуйте уменьшить ваш браузер и смотреть левую черную сторону. –

Вам нужно сделать SVG явно заполнения страницы IE

body { 
 
    background:red; 
 
    margin:0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<svg fill="black" viewBox="0 0 1280 50" preserveAspectRatio="xMidYMin" width="100%" height="100%"> 
 
    <polygon points="0 0 1280 0 1280 0 0 50"/> 
 
</svg>

источник

2014-12-10 10:21:46

Спасибо! Я попытался, но SVG не может быть элементом высоты страницы. http://jsfiddle.net/zujjof9q/, см., где идет контент. –

Тогда вам нужно будет сделать это фоновым рисунком CSS. –

Да, но мысли об использовании этого SVG используют заливку. Поэтому мне нужно включить только svg. –

Эта ошибка не фиксируется или найден, но я создал простое решение CSS, потянув его вне браузера ан переполняя его. Я знаю, что это не решение, но по крайней мере, клиент не заметит :)

Что-то вроде:

svg{ 
    fill: currentcolor; 
    left: -7px; 
    position: absolute; 
    width: 103%; 
} 

.container{ 
    overflow:hidden; 
}

источник

2014-12-11 07:36:46

Ширина SVG не заполняется на странице

ответ

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