开发者

Embed SVG into HTML

开发者 https://www.devze.com 2023-04-12 23:47 出处:网络
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

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.

0

精彩评论

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

关注公众号