2011-10-20 303 views
0

我在尝试减少http请求并使用svg而不是css3的东西来玩小实验......无法将此SVG设置为动态缩放。理想情况下,我希望将其宽度和高度设置为50%,并在窗口调整大小时让浏览器完成剩下的工作。可调整大小的html svg图像

下面的代码:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <title>Daniel Hutchinson</title> 
    <g> 
    <path d="m133.936,182.53101h-8.41701v77.21298h8.05002c21.40799,0 39.70398,-11.70999 39.70398,-38.60599c0.00101,-24.70099 -16.28299,-38.60699 -39.33699,-38.60699z" clip-rule="evenodd" fill-rule="evenodd"/> 
    <path fill="black" d="m218.448,0c-120.646,0 -218.448,97.802 -218.448,218.448s97.802,218.448 218.448,218.448s218.448,-97.802 218.448,-218.448s-97.80301,-218.448 -218.448,-218.448zm-77.925,290.117h-50.86501v-137.95801h50.86501c38.423,0 70.07701,30.19 70.07701,68.97897s-31.83701,68.97903 -70.07701,68.97903zm210.22499,0h-35.862v-56.53699h-51.78v56.53699h-35.862v-137.95801h35.862v53.24402h51.78v-53.24402h35.862v137.95801l0,0z" clip-rule="evenodd" fill-rule="evenodd"/> 
    </g> 
</svg> 
+0

你不能使用CSS来缩放它吗? – tekknolagi

+0

我会......理想情况下,我将它的宽度设置为css中的50%,它将处理其余 – technopeasant

回答

1

浏览器将不能正常缩放SVG图像,除非你给他们一个viewBox,我在这些数字赶到通过快速experimenting in JSFiddle,你很可能制定出一个所需的确切瓦莱斯举手之劳:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 600 600"> 

您也可以尝试指定widthheight属性,不同的浏览器回应他们以不同的方式,尤其是当你那么它们的大小与CSS。前段时间,我敲开a test page which tried all the combinations when embedding SVG as an image,比较不同的结果(例如)Firefox和Chrome。我期望在CSS中使用SVG会给出类似的结果。