Блог

Главная - Вопросы по программированию - SVG не отображается

SVG не отображается

#html #css #object #svg #embed

#HTML #css #объект #svg #Внедрить

Вопрос:

Это HTML-код:

 <html>
<head>
    <title>HOME | index</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
</head>
<body>                       
    <div style="text-align:center;padding:150px 0;">
        <object type="image/svg xml" data="/img/menu.svg">
            <!-- <embed src="/img/menu.svg"> -->
        </object>
    </div>                
</body>

И это SVG:

 <svg version="1.1" id="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 228.4 18.2" style="enable-background:new 0 0 228.4 18.2;" xml:space="preserve" width="500px" height="500px">
    <style type="text/css">
        .st0{
            fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;
        }
    </style>
    <line id="XMLID_1_" class="st0" x1="5.8" y1="10" x2="221.8" y2="10"/>
</svg>

Тот же результат, если я использую embed src.
SVG — это просто штрих, и он не отображается ни в одном браузере (firefox, chrome, edge). Я новичок в SVG-изображениях.

Комментарии:

1. Знаете ли вы, как искать источники в инструментах разработки? Сначала вы должны посмотреть, загружается ли файл, и вы можете увидеть его оттуда

2. Да, я это делаю. Загружается только HTML-файл. Мне интересно, является ли это проблемой ширины и высоты.

3. Если изображение даже не загружается, у вас может возникнуть проблема с вашим путем к файлу. Не могли бы вы попробовать сделать это с помощью тега img? Попытка проверить путь?

4. РЕШЕНО! Использование <img> тега и перемещение SVG в основную папку вместо /img. Вы были правы, это также была проблема с путем к файлу.