SVG <image> 在 Chrome 上的 <defs> 中不起作用答案

【问题标题】：SVG <image> doesn't work in <defs> on ChromeSVG <image> 在 Chrome 上的 <defs> 中不起作用
【发布时间】：2011-04-28 14:07:59
【问题描述】：

我想在 defs 标签中定义的组中使用图像。但在 Chrome 上没有任何效果。在 Firefox 中，仅显示 .png 文件。只有矩形出现，但在 Chrome 中有奇怪的错误。这是 SVG 支持还是我没有正确使用它。

平面.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  baseProfile="full" width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

 <defs>
  <g id="car">
   <rect x="0" y="0" width="30" height="30" fill="#ff0000" />
   <image xlink:href="items/car.svg" x="0" y="0" width="30" height="30" />
   <image xlink:href="items/t6k.png" x="100" y="100" width="140" height="140" />
  </g>
 </defs>

 <use xlink:href="#car" x="0" y="0" width="600" height="600" />

</svg>

图片/car.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  baseProfile="full" width="30" height="30"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

    <rect x="0" y="0" width="30" height="30" fill="red" stroke="green" stroke-width="3"/>

</svg>

下载代码：http://www.4shared.com/file/9gNi5gCO/svg_bug.html

【问题讨论】：

标签： image google-chrome firefox svg rendering

【解决方案1】：

对我来说看起来像是有效的 SVG 1.1。我认为 Firefox 尚不支持 <image> 元素中的 svg。不过，我的顿悟-webkit nightly 似乎渲染得很好，Opera 也是。

2014 年更新：外部 svg 在 Chrome、Opera 和 Firefox 中运行良好，请参阅 example。

【讨论】：

我可以确认Firefox，包括FF4b6，不支持图像元素中的svg。