SVG viewport視口和畫布

admin發表於2018-09-24
SVGView

viewport翻譯成漢語是視口的意思。

當然視口是直譯的結果，更加通俗一點就是觀察事物的視窗。

可能上面的描述還不夠清晰，下面通過一個簡單程式碼進行一下演示。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  width:200px;
  height:100px;
  border:2px solid red;
  overflow:scroll
}
#canvas{
  width:1000px;
  height:83px;
  background-color: green;
}
</style>
</head>
<body>
<div id="box">
  <div id="canvas">螞蟻部落SVG教程</div>
</div>
</body>
</html>

上面程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/24/155728m1z0llukql4keql9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分析如下：

（1）.視口就是觀察事物的視窗，如同屋子裡的一扇窗子，通過窗子這個視口觀察外部世界。

（2）.在上述程式碼中，可以認為藍綠色的部分就是視口，視口的尺寸通常都是有限的，並不能看到所有的繪製內容，上述程式碼中也做了體現，可以拖動滾動條看到更多內容。

二.畫布：

畫布更容易理解一點，SVG中的畫布基本和實際繪畫中的畫布概念是一致的。

如果說房屋的窗子是視口，通過它可以看到外面的自然世界，那可以認為天地即為畫布。

同樣的道理，上面的程式碼中如果認為box是視口，那麼它的子元素canvas是畫布。

前面提到，視口通常是有限的，通過它只能看到一部分內容，理論上畫布在任何維度上都可以無限延伸。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border:1px solid red
}
</style>
</head>
<body>
<svg
     x="10" y="10"
     width="200"
     height="200">
  <rect x="150" y="20"
        width="100"
        height="100"
        fill="blue"/>
</svg>                        
</body>
</html>

使用<svg>元素就可以建立一個視口，然後就可以在其中進行繪圖。

通過這個視口可以觀察到內部繪製的內容，但是由於視口尺寸有限，可能看不到全部內容。

相關文章