Вопрос по svg – Chrome не отображает SVG, на который ссылаются через тег

56

У меня проблемы с Google Chrome не рендеринг SVG с тегом IMG. Это происходит при обновлении страницы и начальной загрузке страницы. Я могу получить изображение для показа по "Инспектирующему элементу" затем щелкните правой кнопкой мыши файл SVG и откройте файл SVG в новой вкладке. Изображение SVG будет отображаться на исходной странице.

<img src="../images/Aged-Brass.svg">

Полностью в недоумении здесь относительно того, в чем проблема. Изображение svg прекрасно отображается в IE9 и FF, а не в Chrome или Safari.

У меня также установлены типы MIME. (Изображение / SVG + XML)

EDIT: Вот простая HTML-страница, которую я создал, чтобы проиллюстрировать мою проблему.

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #ImageTag{
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="ImageTag">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

Как видите, я пытаюсь использовать SVG-файл в теге img и в css в качестве фонового изображения. Ни одна из них не работает при начальной загрузке страницы в Chrome или Safari. Когда я проверяю элемент правой кнопкой мыши на svg или щелкаю ссылку, чтобы загрузить svg в другом окне, файл svg будет отображаться на исходной вкладке.

По какой-то случайности, ваш "Aged-Brass.svg" содержать встроенное изображение? У меня была такая же проблема, и это то, что я проследил до ... McGarnagle
Можете ли вы привести пример или разместить здесь пример кода? Sirko
Мы действительно должны иметь возможность увидеть и воспроизвести это сами, если вам нужна помощь. Phrogz

Ваш Ответ

15   ответов
2

выглядит как ошибка Chrome, я сделал что-то еще, потому что чуть не сошел с ума из-за этого ... используя отладчик Chrom, если вы измените css объекта svg, который он показывает на экране.

так что я сделал: 1. проверьте размер экрана 2. прослушать «загрузить» событие моего объекта SVG 3. когда элемент загружен, я меняю его CSS, используя jQuery 4. это помогло мне

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}
width: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>

2

Я смог использовать ваш образец для создания тестовой страницы, и он работал просто отлично. Я предполагаю, что что-то не так с вашим SVG-файлом. Вы можете вставить это здесь? Вот образец, который я использовал.

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>
1

Добавление атрибута width к тегу [svg] (путем редактирования исходного XML-файла svg) мне помогло: например:

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>
0

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

Вы можете сделать либо в строке или в файле CSS:

In-line:

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

Css file:

<img src="../images/Aged-Brass.svg" class="image" alt="logo">
.image {
    width: 100px;
    height: 50px;
}
1

Сначала я экспортировал свой svg из Photoshop CC, и мне пришлось добавить его вручную

version="1.1" в<svg> тег

чтобы показать его на хром.

1

В моем случае эта проблема сохранялась, когда я создавал и сохранял SVG с помощью Photoshop. Помогло открытие файла с помощью Illustrator и последующий экспорт svg.

Error: User Rate Limit Exceeded
13

Я пришел сюда, потому что у меня была похожая проблема, изображение не отображалось. Я обнаружил, что заголовок типа контента моего сервера тестирования был неправильным. Я исправил это, добавив следующее в мой файл .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Источник:http://kaioa.com/node/45

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
5

использование<object> вместо этого (конечно, замените каждый URL своим собственным):

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}
<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>

23

Тэгу svg необходим атрибут пространства имен xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
25

я пришел сюда, потому что у меня была такая же проблема, когда я проверяю элемент, я вижу файл, но на сайте я не могу (даже при использовании localhost)

ответ на мою проблему был в сохранении файла SVG. Если вы сохранили его из иллюстратора, обязательно нажмите «Вставить». а не «ссылка». так как ссылка будет просто ссылаться на ваши локальные файлы, а не включать данные (если я правильно понимаю). enter image description here

Я читал об этом на веб-сайте Adobe, у которого есть некоторые другие полезные советы для экспорта http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Это сработало для меня, надеюсь, это было полезно.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

Была такая же проблема. Если сервер настроен правильно и .htacces не является ответом, возможно, вы захотите посмотреть встраиваемый источник svg. Мои были созданы с помощью текстового редактора, хорошо отрисованы в Chrome & Safari внутри html5-кода, после встраивания ничего не было видно. Добавил правильную версию, размеры и т. Д. В код SVG и работает как шарм. Также все стили встроены.

Т.е.

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>
2

У меня была похожая проблема, и существующие ответы на нее либо не применимы, либо работали, но мы не могли использовать их по другим причинам. Поэтому мне пришлось выяснить, что не понравилось Chrome в наших SVG.

В нашем случае оказалось, чтоid атрибутsymbol тег в файле SVG имел: в этом, что не понравилось Chrome. Как только я удалил: это работало нормально.

Плохой:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

Хорошо:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>
20

Простой и легкий способ; в соответствии с https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Вы должны открыть файл .SVG с помощью текстового редактора (например, блокнота) и изменить

xlink:href="data:img/png;base64,

чтобы:

xlink:href="data:image/png;base64,

это сработало для меня!

Error: User Rate Limit Exceeded
0

У меня тоже возникла такая же проблема с хромом, после добавленияDOCTYPE работает как положено

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Before

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

After

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

Вы убедитесь, что вы добавляетеStyle of the Image это работает для меня.

style= "width:320; height:240"

Похожие вопросы