svg 图像元素未在移动设备上显示答案

【问题标题】：svg image element not shown on mobilesvg 图像元素未在移动设备上显示
【发布时间】：2018-06-06 11:20:04
【问题描述】：

我一直在尝试让我的 svg 项目的跨浏览器兼容性工作。我有一个朋友在手机上测试我的链接，但他说图像没有加载并且他得到一个黑屏（我假设他也指的是黑色，是背景中的rect）。有谁知道我的代码有什么问题或为什么图像无法在移动设备上正确显示？

svg

<svg viewbox="0 0 3000 2500">
<g transform="translate(225,50)">
  <rect width="2550" height="1925" id="background-rect"></rect>
  <image href="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" width="2550" height="1925"></image>
</g>
</svg>

示例：https://codepen.io/RobMo/pen/aVvKEP

PS：只是一个想法：这可能与我没有声明命名空间有关。我现在无法测试它，但这可能是造成这种情况的原因。或者也许可以帮助人们提供答案的灵感:)。

PPS：要使用<img> 标签，您需要使用xlink:href 而不是href。我也应该删除 svg 标记中的命名空间。

【问题讨论】：

您的 SVG 是外部图像，还是内嵌在 HTML 页面中？如果是前者，您使用什么 HTML 标记来嵌入它（<img>、<object> 等）。

标签： svg

【解决方案1】：

添加命名空间时会发生什么？

<svg viewbox="0 0 3000 2500" xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink">
   <g transform="translate(225,50)">
      <rect width="2550" height="1925" id="background-rect"></rect>
      <image href="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" width="2550" height="1925"></image>
   </g>
</svg>

REF - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

【讨论】：