前言

svg 的viewBox 可以重新定义视口的显示范围，通常表现为平移，缩放内容，之前测试的一直是viewBox 和viewPort 之间的等比缩放，后来发现不等比情况与认知有些出入，如下

<svg width="100" height="100" viewBox="0 0 50 100" style="border: 1px solid #ddd"><circle id="mycircle" cx="50" cy="50" r="50"  stroke-width="1" stroke="#0f0"/>
</svg>

避免误导，就不说之前对viewBox 的理解了。

一、案例解析

如何确定添加viewBox 之后的内容？以下是通过测试得出的步骤

第一步确定 viewBox 的选区（蓝色）
只考虑中心对齐策略，将viewBox 与viewPort 中心重叠
中心缩放 viewBox 使其恰好能放入viewPort,以较小的长宽缩放比（如：viewPort.height/viewBox.height）为准，本例中较小缩放比为1，因此，并不需要缩放，viewPort(红框)所示即为缩放后的结果

换个具有明显缩放和平移效果的，如下

<svg width="200" height="100" viewBox="50 50 400 100" style="border: 1px solid red"><circle id="mycircle" cx="50" cy="50" r="50"  />
</svg>

viewBox视图缩放（1）相关推荐

blender视图缩放_如何使用主视图类型缩放Elm视图
blender视图缩放 A concept to help Elm Views scale as applications grow larger and more complicated. 当应用程 ...
【Unity3D】3D 视图操作 ( 视图基本元素 | 导航器 | 栅格 | 天空盒 | 3D 视图操作 | 视图旋转 | 视图缩放 | 视图平移 | 导航器操作 | 恢复方向 | 顶、右、前视图 )
文章目录一.3D 视图基本元素 1.导航器 Gizmo 2.栅格 Grid 3.天空盒 Skybox 二.3D 视图操作 1.视图旋转 2.视图缩放 3.视图平移三.导航器操作 1.恢复方向 2. ...
osg自定义操作器实现视图缩放
在osg里自己实现操作器,目标是实现绕某中心点旋转,能够支持平移视图,缩放视图. 现在记录一下缩放视图的实现方法. 首先操作器是从osg标准操作器osgGA::StandardManipulator继 ...
android 缩放视图,当容器视图缩放为centerInside时,在android imageview中找到位图的位置...
我有一个包含自定义ImageView的RelativeLayout,scaleType ="centerInside",我在一个位图中加载(通常小于imageView).如何获取位 ...
AutoCAD2012从入门到精通中文视频教程第18课点等分及视图缩放（个人收藏）
http://158pan.cn/file-150836.html 首先,启动AutoCAD 怎样利用AutoCAD等分规则图形? 然后可利用左侧的绘图工具绘制一个圆怎样利用AutoCAD等分规则图 ...
caa catia 视图缩放_CATIA_CAA V5R19教程
CATIA CAA V5R19 二次开发详细教程 CAA ,全称 C omponent A pplication A rchitecture ,组件应用架构. CAA 架构 CATIA 本身是按照组件 ...
caa catia 视图缩放_CAA对话框如何在CATIA窗口居中显示
在对话框的WindSizeNotification消息响应函数中添加如下代码可以使CAA对话框在CATIA窗口中居中显示:if(!_isInited){ //设置窗口大小并居中显示 CATDlgWin ...
Qt中视图的缩放对应缩略图中矩形框的缩放
本文实现的目的是:视图缩放时,缩略图中的矩形框也进行缩放,而缩略图中的矩形区域为视图中的可见区. 获取视图中滚动条的值,将其值与缩略图所在的小窗口对比,可通过绘图求其比例,再按比例缩小. 首先提供主要 ...
cad能整体比例缩小吗_CAD中两个缩放的不同及其各自的应用
CAD中有两个缩放,一个是视图的缩放,一个是图形大小的缩放,两个缩放完全不一样,其区别和各自的应用如下所示: 1.两个缩放的区别: (1)定义不同: 视图缩放是在不影响图形大小情况下感官上的缩放,如黑 ...

viewBox视图缩放（1）

文章目录

前言

一、案例解析

viewBox视图缩放（1）相关推荐

最新文章

热门文章