SVG <defs> создает пустое пространство

Я использую SVG в своем проекте, теперь мне нужно создать элемент SVG внутри веб-страницы только с <defs>. Позже на странице я должен использовать много раз объекты, определенные ранее. Проблема заключается в объекте с определениями, он создает пустое место на странице. Попробуйте этот код:SVG <defs> создает пустое пространство

<!DOCTYPE html> 
<html> 
    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <defs> 
       <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
      </defs> 
     </svg> 

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> 
      <use x=0 y=0 xlink:href="#star"> 
     </svg> 
    </body> 
</html>

У меня есть проблемы как с Firefox и Chrome. Меня не волнует IE.

источник

2013-05-24 Max Markson

Добавить нулевые размеры определяющих <svg> тега:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

Как установлено ни видового экран, ни размеры, я думаю, браузер пытался вывести значения здесь и, таким образом, в результате чего «по умолчанию размера» для SVG , тем самым создавая пустое пространство.

РЕДАКТИРОВАТЬ

В качестве альтернативы, установить display: none к <svg> с <defs> элемента:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

источник

2013-05-24 07:21:51 Sirko

Пространство сокращено, но оно не исчезло. Попытайтесь переместить определение после использования, вы увидите, что перемещение вверх и пустое пространство перемещаются вниз. –

@MaxMarkson В моем FF и Chrome '' -SVG полностью исчез. Вы уверены, что некоторые прокладки или поля не применяются? – Sirko

Проверьте это изображение: http://imageshack.us/a/img819/2999/defsafter.png http://imageshack.us/a/img826/1323/defsbefore.png –

этих двух причин, почему это происходит,:

отсутствие размеров
<svg> отображаются как display:inline

Добавление размеров к <svg> тега будет изначально скрыть большую часть пространства, занимаемого, но небольшая часть останется.

Установка display:none спрячет любые шаблоны/градиенты/etc, указанные в других элементах <svg>, и поэтому не подходит.

Чтобы скрыть его полностью, установите тег <svg> как display:block. Затем он будет учитывать размеры нулевой длины, указанные ранее.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block;"> 
    <defs> 
     <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
    </defs> 
</svg>

источник

2016-06-02 16:33:04 jussinen

Это работало только после установки 'width =" 0 "и' height = "0" 'в комбинации с' display: block' или 'position: absolute'. – Dominik

SVG <defs> создает пустое пространство

ответ

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