是的,要添加width和height属性,width 和 height 属性可设置此 SVG 文档的宽度和高度。希望对你有帮助,望采纳!
用以下例子解释:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!-- created with inkscape (http://www.inkscape.org/) -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="500"
height="500"
viewbox="0 100 500 100"
>
<rect x="0" y="100" width="200" height="100" fill="yellow" stroke="blue" />
</svg>
开始解释:
加上viewbox后对比发现,矩形大小没变,但是移动到中间了(垂直居中)。
这是因为,矩形的坐标参数(rect x="0" y="100" width="200" height="100")
参照的是viewbox的坐标。参照这个坐标画出矩形后,截取这个坐标系中
(0 100 500 100)这块区域,即从点(0,100)开始宽500高100的一块区域(我们称这块区域为a吧),也就是,正好完整的截取了所画的那块矩形,不多不少。然后,我们把a这块区域与svg那块区域(<svg x="0" y="0" width="500" height="500">),即500x500的区域(我们称之为b区域吧),按区域中心重叠,然后,按比例的拉伸或压缩a的大小,使它恰好包括在b中。
做完这一步后,结果所展示的,就是代码的效果。
Photoshop|
Dreamweaver|
SVG|
WebGL|
Visual Studio|
PowerDesigner|
Eclipse|
Git|
Apache Ant|
Atom|
Composer|
CodeSmith|
Flex|
Gradle|
Maven|
Sublime Text3|
SVN|
Tableau|
Vim|
Chrome开发者工具|
OpenGL|
Unity|
Direct3D|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....