开发者

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

开发者 https://www.devze.com 2023-01-21 21:08 出处:网络
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

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

精彩评论

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