HTML中包含的SVG是否可以带有"img"标记?标签具有指向带有“图像"的外部图像的链接.标签? [英] Can an SVG included in HTML with an "img" tag have a link to an external image with the "image" tag?

问题描述

我在服务器上的同一位置有以下文件image.svg和文件bitmap.png:

I have the following file, image.svg, along with a file bitmap.png in the same spot on a server:

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="100px" height="100px"
         xlink:href="bitmap.png" />
</svg>

当我直接转到图像文件时，它包含bitmap.png图像.

When I go directly to the image file, it includes the bitmap.png image.

当我将图像包含在具有< object data ="image.svg"></object> 标记的网页中时，将加载bitmap.png文件.

When I include the image in a webpage with an <object data="image.svg"></object> tag, the bitmap.png file loads.

当我将图像包含在带有< img src ="image.svg"/> 标记的网页中时，bitmap.png不会不加载.

When I include the image in a webpage with the <img src="image.svg" /> tag, the bitmap.png does not load.

有什么作用?

推荐答案

svg本身有效.

当通过< img>引用svg时，某些浏览器不允许外部引用.要使其正常工作，您可以做的就是将png转换为数据URI，然后将其放在那里，例如，参见

Some browsers don't allow external references when an svg is referenced via <img>. What you can do to get it working is to convert the png to a data URI and put that there instead, see e.g this answer for how to do that.

这篇关于HTML中包含的SVG是否可以带有"img"标记?标签具有指向带有“图像"的外部图像的链接.标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！