Embed SVG into HTML
I need to embed a SVG file into HTML file, the SVG's dimensions are bit larger. so, I need the SVG to be re开发者_如何学编程-sized to the screen resolution. Is there any way to do that? Thanks.
If you want an SVG file to fit in a container the first thing to do is to set a viewBox
attribute and remove width
and height
attributes from the root <svg>
element:
<svg viewBox="0 0 100 200" ... >
The values of a viewBox
are: x y width height
. Read more in the SVG specification.
I dont know how complex is that SVG, but at least you can put whole description under one group , and then use transform="scale(SF)" whereas "SF" stands for scaling factor. Default is 1 (100%), so use little script:
TransFrm = "scale(" + SF + ")";
yourElement.setAttributeNS(null, "transform", TransFrm);
Or if you mean resizing by viewBox then <rect x="0" y="0" width="100%" height="100%"/>
.
Or if you mean something else take a look at: http://janistoolbox.typepad.com/blog/2009/12/svgauto-resize-svg-on-an-html-page.html
Good luck.
精彩评论