开发者

SVG <image> doesn't work in <defs> on Chrome

I want to use image in a group definded in defs tag. But on Chrome nothing works. In Firefox only the .png file is displayd. Only Rectangle apears but with strange bug in Chrome. Is this is supported by SVG or im not using it right.

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.p开发者_如何学JAVAng" x="100" y="100" width="140" height="140" />
  </g>
 </defs>

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

</svg>

images/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>

Download code: http://www.4shared.com/file/9gNi5gCO/svg_bug.html


Looks like valid SVG 1.1 to me. I think Firefox doesn't yet support svg in the <image> element. My epiphany-webkit nightly seemed to render it fine though, and Opera too.

2014 update: external svg <image> works fine in Chrome, Opera and Firefox, see example.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜