SVG viewport视口和画布

2018-9-24 15:56| 作者: admin| 查看: 1160| 评论: 0|来自: 蚂蚁部落

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>元素就可以创建一个视口,然后就可以在其中进行绘图。

通过这个视口可以观察到内部绘制的内容,但是由于视口尺寸有限,可能看不到全部内容。


鲜花

握手

雷人

路过

鸡蛋
返回顶部