可調整大小的html svg圖像

我在嘗試減少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>

來源

2011-10-20 technopeasant

你不能使用CSS來縮放它嗎？ – tekknolagi

我會......理想情況下，我將它的寬度設置爲css中的50％，它將處理其餘 – technopeasant

瀏覽器將不能正常縮放SVG圖像，除非你給他們一個viewBox，我在這些數字趕到通過快速experimenting in JSFiddle，你很可能制定出一個所需的確切瓦萊斯舉手之勞：

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

您也可以嘗試指定width和height屬性，不同的瀏覽器迴應他們以不同的方式，尤其是當你那麼它們的大小與CSS。前段時間，我敲開a test page which tried all the combinations when embedding SVG as an image，比較不同的結果（例如）Firefox和Chrome。我期望在CSS中使用SVG會給出類似的結果。

來源

2011-10-22 01:41:31 robertc

可調整大小的html svg圖像

回答

相關問題