Я думаю, что ваша проблема существует в другом месте. Вот упрощенная версия вашего документа, которая правильно показывает связанное изображение:
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="0 0 48 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="top-tile">
<image width="1" height="1" x="-0.5" y="-0.5" class="face"
xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png" />
</g>
</defs>
<g transform="scale(16)">
<g transform="translate(1.5, 1.5)">
<use xlink:href="#top-tile" />
</g>
</g>
</svg>
Если я использую абсолютные пути к вашим изображениям и удаляю атрибуты clip-path, я вижу ваши изображения в Safari и Chrome. Если я вставлю clip-path обратно, я вижу все черное заполнение в Safari, но что, по-видимому, правильно в Chrome. Если вы указали абсолютные пути (например, xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png"), это работает для вас в Chrome?
Теперь, когда я вижу, что вы пытаетесь сделать, я хотел бы дать вам +2 за создание складной плитки Minecraft:)
Редактировать Следующие шаги:
- Удалите пробел из имени вашего файла.
- Попробуйте использовать относительный путь вместо абсолютного.
- Теперь, когда мы знаем лучше основной вопрос, Google ищет больше ответов (я не нашел ни одного)
- Сократите это до тривиального теста и сообщите об ошибке в Chrome.
Редактировать 2 : Как показано в обновленном вопросе, @Eric сообщил об ошибке в Chrome . Как показано в этом отчете об ошибках, более новые версии Chrome отображают ожидаемый результат. Кроме того, слегка измененный тестовый пример , использующий явную пиксельную высоту и ширину изображения и пиксельный SVG viewBox и размеры, работает во всех протестированных браузерах.