问题
Inside a simple SVG element I have an image.
- Chrome: Version 28. - works perfect
- Firefox: 22.0 - no image is drawn
- Opera: 12.16 - image is show 4 times larger than normal
Code:
<svg width="500px" height="500px" viewBox="0 0 70 70">
<image x="0" y="0" width="10" height="10"
id="knight" xlink:href="/images/knight.svg" />
</svg>
回答1:
Your SVG is not being scaled to fit your 10x10 image rectangle because it has no viewBox. SVG renderers need to know the dimensions of the SVG content in order to know how to scale it. That is what the viewBox attribute is for.
Try adding the following to the root <svg> element in knight.svg.
viewBox="0 0 45 45"
Also, you need to define your namespaces for svg and xlink. Although perhaps you have just removed those for clarity(?).
回答2:
Your knight is 45 x 45 pixels in size. The top left corner (10 x 10) pixels is blank.
You are asking for the image to be displayed for that top left corner in the <image> markup so Firefox correctly shows nothing because there's nothing there.
If you want to see the knight, make the <image> width and height 45 to match the underlying knight.svg dimensions.
Neither Chrome nor Opera seem to display the image correctly
An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’
来源：https://stackoverflow.com/questions/17708920/svg-image-does-not-show-in-firefox