SVG элементы не отображаются в браузере

Question

Я столкнулся с довольно странной ситуацией.У меня есть скрипт, который рисует некоторые линии с помощью плагина jQuery SVG.Он работает в отдельном HTML-файле.Но как только я копирую этот скрипт и вставляю его в другой HTML-файл, он перестает показывать элементы SVG в браузере.Это прекрасно работает, потому что когда я вижу исходный код страницы после запуска скрипта, я вижу, что скрипт добавляет элементы SVG на страницу.Вот код SVG страницы в любом случае:

<svg version="1.1">
  <line x1="492" y1="503" x2="717" y2="576" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="500" y1="400" x2="600" y2="400" stroke="#4A4A4A" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="587.5" y2="542.5" stroke="red" stroke-width="2"></line>
  <line x1="604.5" y1="539.5" x2="592.5" y2="527.5" stroke="red" stroke-width="2"></line>
</svg>

В чем может быть проблема, что эти элементы SVG не отображаются в браузере?Кто-нибудь еще сталкивался с такой странной ситуацией?

Answer 1

Попробуйте добавить атрибут viewBox к элементу svg, чтобы система координат отображала линии в окне просмотра svg. Или убедитесь, что в обоих документах размер элемента svg одинаков. Я предполагаю, что в одном документе svg довольно широкий, а в другом он не такой широкий (таким образом, обрезая линии).

Answer 2

Проблема решена. Я не заметил, что на новой странице, где элементы SVG не показывались, элемент DIV, где я рисовал элементы SVG, был обернут другим DIV. А в файле CSS оболочка DIV имеет атрибут display: table;. Я удалил этот атрибут, и теперь отображаются элементы SVG. Спасибо, ребята, за вашу помощь и предложения.

Answer 3

Вы забыли добавить тег пространства имен SVG на свою страницу?