svg circle标签可以填充图像吗

Posted 2023-04-08

参考技术A 有没有指定这些元素的position样式，z-index要起作用，这个元素一定要设置position样式。 基本上不想改变元素的位置，就用position:relative;就可以。这样z-index就可以起作用了 参考技术B 可以
<circle cx="100" cy="100" r="50" fill="url(#url)"/>

包含在 HTML 中的带有“img”标签的 SVG 可以链接到带有“image”标签的外部图像吗？

【中文标题】包含在 HTML 中的带有“img”标签的 SVG 可以链接到带有“image”标签的外部图像吗？

【英文标题】：Can an SVG included in HTML with an "img" tag have a link to an external image with the "image" tag?

【发布时间】：2012-07-06 08:50:31

【问题描述】：

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

<?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   version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0"  
         xlink:href="bitmap.png" />
</svg>

当我直接进入图像文件时，它包含了 bitmap.png 图像。

当我在带有<object data="image.svg"></object> 标签的网页中包含图片时，会加载 bitmap.png 文件。

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

什么给了？

【参考方案1】：

svg 本身是有效的。

当通过 引用 svg 时，某些浏览器不允许外部引用。要使其正常工作，您可以将 png 转换为数据 URI 并将其放在那里，请参阅例如 this answer 了解如何执行此操作。