我正在從官方文件中學習svg，有這樣的說法。我不明白，如果它已經具有widthand height屬性，那么再次指定它又有viewBox="0 0 1500 1000"什么用呢？據說，“一個px單位被定義為等于一個用戶單位。因此，“ 5px”的長度與官方文檔中的“ 5”的長度相同，因此此viewBox的寬度為1500px， 1000高度視圖，超過300px和200px。那么為什么要首先定義寬度和高度值呢？ <svg width="300px" height="200px" version="1.1" viewBox="0 0 1500 1000" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
3 回答
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
寬度和高度是多少<svg>。viewBox控制其內容的顯示方式，因此viewBox =“ 0 0 1500 1000”會將<svg>元素的內容按比例縮小5（1500/300 = 5和1000/200 = 5），并且內容將為1 / 5沒有viewBox時的大小，但是<svg>
假設您有一個彈性表面，并將其切成4個相等的部分。如果扔掉3塊，則表面的大小是原始表面的1/4。如果現在拉伸表面并使其大小與原始表面相同，則該表面上的所有內容都會是該尺寸的兩倍。這就是viewBox和width / height關聯的方式。
茅侃侃
TA貢獻1842條經驗 獲得超21個贊
如果不指定視區，則元素中所有無單位的數字均假定為像素。（并且SVG假設將90 dpi或每英寸的像素從厘米等單位轉換為像素。）
一個視圖框使您可以在元素中使無單位數字表示“用戶單位”，并指定如何將這些單位映射到大小。為簡單起見，僅考慮x坐標，即標尺。您的視圖框顯示標尺將具有1500個單位，以匹配svg的200像素大小寬度。
從0到1500（無單位，即用戶單位）的線元素將拉伸200像素，如圖所示，即橫跨svg繪圖的寬度。
（并且由于SVG可伸縮且不會降低分辨率，因此當用戶放大或縮小像素時，像素在現實世界中的意義并不大。）
它是一種坐標轉換。
我建議您從類似“ SVG Essentials”的書中學習，大約要用10美元，我從中大致引用了這個答案。
慕勒3428872
TA貢獻1848條經驗 獲得超6個贊
默認情況下
<svg width="300" height="200">
svg網格的“標尺”以像素為單位（該svg中的所有形狀均以像素為單位）
但是您想使用自己的單位，可以使用viewBox attr：
<svg width="300" height="200" viewBox="0 0 1500 1000">
這意味著：
水平軸： 1500（您的寬度單位）= 300px => 1（您的寬度單位）= 300 / 1500px = 1 / 5px
垂直軸： 1000（您的身高單位）= 200px => 1（您的身高單位）= 200 / 1000px = 1 / 5px
現在，svg中的所有形狀都會縮放：
與原點相比，它們的寬度縮小到1 / 5px（縮小1/5 <1 =>）。
與原點相比，它們的高度也縮放為1 / 5px（1/5 <1 =>縮?。?/p>
- 3 回答
- 0 關注
- 697 瀏覽
添加回答
舉報
0/150
提交
取消