1

Что имею:

  • сервер на локалхосте, написан полностью вручную на нативном NodeJS
  • content-type заголовок страницы отдаётся как text/html; charset=utf-8
  • тэг <!DOCTYPE html> присутствует

История такова, что я захотел добавить рисованный прямоугольник на свой сайт, в codepen он работает хорошо и сама отдача страницы у них настроена также: https://codepen.io/Diskyp/pen/rNapGzM

Я добавил получившийся код на мой локальный сайт и схематично получилось что-то вроде такого:

<html>
  <body>
    <div class="block1">
      <div class="block2">
        <svg>
          <polygon points="10 20, 300 10, 300 120, 10 80"/>
        </svg>
      </div>
    </div>
    <div class="side-block">
    </div>
  </body>
</html>

Однако svg элемент и полигон ничего не отрисовывали, имели 0х0 размер и не поддавались никаким изменениям.

После многих часов разбирательств с попытками писать самые различные xmlns атрибуты, я невообразимым образом установил, что после того как я юзаю сеттер innerHTML у самого svg элемента или у любого его родителя (причём неважно что писать, например document.body.innerHTML+='horses are sexy'), то тэг svg и его полигон тут же оживают и мой прямоугольник отрисовывается как положено. Полагаю это происходит вследствие ререндера HTMLя.

Как я дошёл до такого, есть ли этому феномену объяснение и могу ли я дальше жить без этого костыля?

Записал ГИФку для наглядности: https://ibb.co/8jbqk1X

Провёл некоторые эксперименты:

  • Если перенести svg тэг в отдельный .svg файл и добавлять через img, то прямоугольник отображается сразу.
  • Если перенести весь мой HTML код в отдельный .html файл и запустить без сервера, то прямоугольник отображается сразу.
  • Если запустить этот .html файл через сервер, то тоже всё впорядке.
  • Однако если попробовать создать svg файл через JS, то поведение повторяется как описано в посте. Кажется, я вплотную подошёл к разгадке...
  • Да, так оно и есть, document.createElement('svg').toString() выдаёт [object HTMLUnknownElement], а это означает, что svg тэг нельзя создавать при помощи createElement функции. Ищу решение...
19
  • 1
    добавьте атрибут viewbox=0,0,300,300 тегу <svg > 6 янв 2020 в 11:28
  • @StrangerintheQ он ни на что не реагирует, пока я не заюзаю innerHTML. Ваш код не исключение.
    – Diskyp
    6 янв 2020 в 11:30
  • @StrangerintheQ я отвечу, там есть нюансы или давай вместе отвечать 6 янв 2020 в 11:32
  • @Alexandr_TT я на мобилке 6 янв 2020 в 11:33
  • 1
    @Diskyp у Вас не закрыт тег body 6 янв 2020 в 12:03

2 ответа 2

3

Ниже пример с указанием viewBox и namespace SVG.

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

namespace - xmlns="http://www.w3.org/2000/svg. Для современные браузеров можно не указывать. Но есть нюансы использования SVG, когда это необходимо.

svg {
  width: 600px;
  height: 300px;
  border: 2px dashed red;
 
  }
  .poly {
    fill: black;
    stroke: blue;
    stroke-width:2px;
   }
  <body>
       <div class="block2">
        <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" >
          <polygon class="poly" points="10 20, 300 10, 300 120, 10 80"/>
        </svg>
      </div>
      </body>

Если у вас всё равно не работает, тогда вам нужно добавить на ваш сервер SVG MIME Types image/svg+xml в статье написано, как это делается

Для Node.js посмотрите этот ответ с web.config.

<mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>

18
  • Я всё это пробовал, попробовал снова, эффекта нет. СВГ начинает реагировать только после использования innerHTML. Сейчас попробую записать гифку для лучшего понимания ситуации, наверное.
    – Diskyp
    6 янв 2020 в 12:06
  • @Diskyp посмотрите ссылку, которую я указал. Скорее всего в этом причина. не указано на сервере - SVG MIME Types image/svg+xml 6 янв 2020 в 12:09
  • У меня написанный с нуля сервер на ноде, здесь имеется ввиду отправлять content-type заголовок как image/svg+xml вместо text/html, правильно?
    – Diskyp
    6 янв 2020 в 12:11
  • @Diskyp вы попробуйте сделать, как в статье написано, а потом другие варианты пробуйте 6 янв 2020 в 12:13
  • У меня нет .php файлов и htaccess файла, которые указаны в статье. У меня весь сервер на одном js файле.
    – Diskyp
    6 янв 2020 в 12:14
1

Если кто столкнётся с такой же проблемой в будущем, хотя я весьма сомневаюсь, то вот в чём дело:

Мой фреймворк создавал svg элемент из шаблона при помощи функции createElement и я не подозревал, что это может являться причиной, так как ошибок не было и сам элемент на экране отображался как обычно. В итоге фреймворк генерировал примерно такой код:

let qwe=document.createElement('svg'),
asd=document.createElement('polygon')
asd.setAttribute('points','10 20, 300 10, 300 120, 10 80')
qwe.appendChild(asd)
document.body.appendChild(qwe)

Но чтобы через JS создавать элементы с особым namespace, нужно использовать функцию createElementNS. Решением стал следующий код:

let qwe=document.createElementNS("http://www.w3.org/2000/svg", "svg"),
asd=document.createElementNS("http://www.w3.org/2000/svg", "polygon")
asd.setAttribute('points','10 20, 300 10, 300 120, 10 80')
qwe.appendChild(asd)
document.body.appendChild(qwe)

Именно поэтому элемент начинал отображаться только после того, как я производил повторный рендинг страницы из строки при помощи innerHTML.

6
  • @MaximLensky думаю неудивительно, что мой собственный, написанный с нуля, какой же ещё мог такой косяк выдать?
    – Diskyp
    6 янв 2020 в 15:01
  • @MaximLensky хэй, не вырывай из контекста, мы там с сервером и отдачей файлов разбирались. Про клиент речь не заходила, поэтому факт с фреймворком был упущен.
    – Diskyp
    6 янв 2020 в 15:04
  • @MaximLensky ну дак никто кроме меня самого незнает синтаксиса моего фреймворка и особенностей его работы, это было бы глупо, но возможно пораньше натолкнуло бы на нужную мысль.
    – Diskyp
    6 янв 2020 в 15:07
  • @Diskyp "Если кто столкнётся с такой же проблемой в будущем, хотя я весьма сомневаюсь" Ошибаетесь - С этой проблемой сталкиваются все новички. 7 янв 2020 в 6:25
  • @MaximLensky сплошь и рядом такое, когда SVG создается с помощью JS и у нас можно найти и на Enso топики с этой проблемой stackoverflow.com/search?q=%5Bsvg%5D+createElementNS 7 янв 2020 в 6:30

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.