Question

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

SVG

rect

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

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

PPS：要使用<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>标记，您需要使用xlink：href而不是href。我也应该在svg标签中删除命名空间。

Answer 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>

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

svg图像元素未在手机上显示

1 个答案: