Изображения в изображениях SVG не отображаются в Chrome, но отображаются локально?

По какой-то причине Chrome отображает SVG без изображений в тегах изображения.

Вот пример из моего SVG:

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

blocker.png - это локальный файл, но я также попытался загрузить его в imgur, но это тоже не сработало.

Вот тэг svg:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Вот как это выглядит локально:

http://i.imgur.com/BDP8KpG.png

Вот как это выглядит на живой веб-странице:

http://i.imgur.com/KVuxLI1.png

Как вы можете видеть, двух игроков не хватает. Этого не происходит, когда я загружаю SVG в Интернете, но когда я пытаюсь связать этот URL с моей страницей, происходит то же самое

Не уверен, что это актуально, но вот HTML-код для страницы:

<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title> 
<style>
img{
    width: 100%;
    height:auto;
    max-width: 800px;
}
</style>
</head>

<body>

<div>
    <img src="svg.svg"/>
</div>

</body>
</html>

Ответ 1

Ответ PaulLeBeau прав. Но другое решение - использовать тег embed вместо тега img для изображения.

<embed src="svg.svg">

Вот несколько способов вставки изображений svg в HTML.

Ответ 2

Когда вы загружаете SVG на веб-страницу с помощью элемента <img>, SVG должен быть автономным. Он не может ссылаться на ресурсы третьей части, как вы делаете, связываясь с файлами PNG. Это ограничение конфиденциальности, наложенное браузером.

Возможные решения:

Преобразуйте PNG в формат URI данных и включите их в свой SVG таким образом.
Преобразуйте свои блокирующие PNG (s) в фактические элементы SVG, такие как <path>.

Ответ 3

Я обнаружил, что Chrome [v 58.0.3029.81 (64-разрядный)] не показывает изображение внутри svg, если файл изображения не находится в корневом каталоге html. .Svg и встроенные.png файлы были помещены в /images -folder, содержимое.svg появилось прямо в Chrome, но не встроенное.png. Когда.png был скопирован в (../) корень html, Chrome работает.

Тем не менее Firefox [v 52.0.2 (32-bit)], похоже, отлично работает, когда.svg и.png находятся в одной папке /images.

Edit: На самом деле в моем случае я загружаю svg методом d3.xml(..) для получения js-дескриптора действительным элементам svg.