Question

我想在defs标签中定义的组中使用图像。但在Chrome上没有任何作用。在Firefox中，仅显示.png文件。只有Rectangle apears但Chrome中有奇怪的bug。这是SVG支持还是我没有正确使用它。

plane.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

Answer 1

对我来说看起来像有效的SVG 1.1。我认为Firefox还不支持<image>元素中的svg。我的顿悟网络套件每晚似乎都很好，而Opera也是如此。

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

SVG <img/>无法在Chrome上的<defs>中使用</defs>

1 个答案: