svg image tag size

后端 未结 1 583
礼貌的吻别
礼貌的吻别 2021-01-14 07:27



    
       

        
相关标签:
1条回答
  • 2021-01-14 07:55

    You need to understand that the width and height are the bounds of the image viewport, not the "size" of the image. Put another way those values are the MAXIMUM area that image should occupy. If a raster (bitmap) image turns out to be smaller or larger than that area then the scaling and positioning are controlled by the preserveAspectRatio attribute. If you don't set width and height they default to 0 which is why you aren't seeing anything. The spec says:

    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’. The placement and scaling of the referenced image are controlled by the ‘preserveAspectRatio’ attribute on the ‘image’ element.

    So the solution you're looking for is to set the width/height to the maximum area you expect an image to fill and then set preserveAspectRatio to the appropriate value to set the scale and position the way you want (the spec provides an example SVG showing some of the possible behaviours for preserveAspectRatio).

    0 讨论(0)
提交回复
热议问题