svg中有一個viewbox屬性，中文翻譯為視區，就是在svg上截取一小塊，放大到整個svg顯示。
這個屬性初學的話有點難以理解，這邊做一個簡單的示例，一看就明白了。
1）先來一個svg，寬高各位300，設置一下邊框：
<svg width="300" height="300" style="border: 1px solid steelblue">
</svg>
運行效果：
這邊其實就是一個300*300的矩形。
2）svg裡面畫一個矩形：
<svg width="300" height="300" style="border: 1px solid steelblue">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>
運行效果：
3）設置svg的viewbox屬性：
<svg width="300" height="300" style="border: 1px solid steelblue"
viewbox="105 55 60 60">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>
先分析一下原理，再來看效果，上面設置的viewbox的值為：105 55 60 60，每個參數的含義如下：
105 表示相對于svg左上角的橫坐标。
55 表示相對于svg左上角的縱坐标。
60 表示截取的視區的寬度。
60 表示截取的視區的高度。
圖示原理：
4） 非等比例的viewbox
上面的viewbox寬高和svg等比例，如果等比例，那麼就是其中一邊放到最大。
<svg width="300" height="300" style="border: 1px solid steelblue"
viewbox="105 55 60 60">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>
圖示原理：
還有不理解的可以給我留言。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
