SVG viewBox & coordinate system
SVG viewBox & coordinate system
https://codepen.io/xgqfrms/pen/abOOrjp
<html>
<body>
<header>
<h1>user coordinate system / viewport coordinate system</h1>
<p>（SVG 宽高）比 viewBox 大，就等比放大；比 viewBox 小，就等比缩小；</p>
</header>
<h2>width="400" height="200 viewbox="0 0 200 100"</h2>
<p>2 : 1</p>
<section>
<svg width="400" height="200" viewbox="0 0 200 100">
<!-- SVG content drawn onto the SVG canvas -->
<rect fill="grey" x="0" y="0" width="200" height="100"/>
<text x="100" y="50" fill="red">200 100</text>
</svg>
</section>
<h2>width="400" height="200" viewbox="0 0 400 200"</h2>
<p>1 : 1</p>
<section>
<svg width="400" height="200" viewbox="0 0 400 200">
<!-- SVG content drawn onto the SVG canvas -->
<rect fill="grey" x="0" y="0" width="200" height="100"/>
<text x="100" y="50" fill="red">200 100</text>
</svg>
</section>
<h2>width="200" height="100" viewbox="0 0 400 200"</h2>
<p>1 : 2</p>
<section>
<svg width="200" height="100" viewbox="0 0 400 200">
<!-- SVG content drawn onto the SVG canvas -->
<rect fill="grey" x="0" y="0" width="200" height="100"/>
<text x="100" y="50" fill="red">200 100</text>
</svg>
</section>
</body>
</html>
svg-coordinate-systems
viewBox
https://www.sarasoueidan.com/blog/svg-coordinate-systems/
SVG viewBox & coordinate system的更多相关文章
- Coordinate System
Coordinate System Introduction of Different Coordinate Systems Cartesian Coordinate System UI Coordi ...
- IOS深入学习（4）之Coordinate System
1 前言 在IOS中相信大家会经常跟一些bounds,frame之类的打交道,这不免会涉及坐标系统,今天我们就来介绍一下Coordinate System(坐标系). 2 详述 坐标系统是定位,大小, ...
- ArcGIS坐标系转换出错：Error 999999执行函数出错 invalid extent for output coordinate system
本文主要介绍在用ArcGIS做坐标系转换过程中可能会遇到的一个问题,并分析其原因和解决方案. 如下图,对一份数据做坐标系转换: 过了一会儿,转换失败了.错误消息如下: “消息”中提示,“执行函数出错 ...
- SVG (viewBox) & DOM (viewport)
SVG (viewBox) & DOM (viewport) circle "use strict"; /** * * @author xgqfrms * @license ...
- SVG ViewBox
如果svg图形太大或者太小,就可以用ViewBox属性来调整在页面中的显示范围.大小. "像素不能直接换算成英寸.厘米,要在 dpi ( dot per inch 分辨率,概念较多,鼠标 d ...
- Silverlight & Blend动画设计系列十：Silverlight中的坐标系统（Coordinate System）与向量（Vector）运动
如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平 ...
- 深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio
本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个 ...
- 理解SVG的viewport,viewBox,preserveAspectRatio
万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...
- Art-Directing SVG图像viewBox属性
Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...
随机推荐
- Redis集群拆分原则之AKF
当我们搭建集群的时候,首先要想明白需要解决哪些问题,搞清楚这个之前,想想单节点.单实例.单机有哪些问题? 单点故障 容量有限 可支持的连接有限(性能不足) ...... 为了解决这些问题,我们需要对服 ...
- LOJ2632
题目描述 译自 BalticOI 2011 Day1 T3「Switch the Lamp On」有一种正方形的电路元件,在它的两组相对顶点中,有一组会用导线连接起来,另一组则不会.有 个这样的元件 ...
- python 字典的用法，访问、增删合并等
python字典可以存储任意类型的对象,字典的每个键:值 冒号(:)分割,每个对直接逗号(,)分割,整个字典包含在{}中,例如:d = {key1 : value1, key2 : value2, k ...
- SpringCloud及其组件详解
SpringCloud及其组件详解 1.Spring Cloud 1.1 Spring Cloud和Dubbo的区别图解 1.2 微服务的技术栈 2.Spring Cloud 概述 2.1 Sprin ...
- 网络地址转换（NAT）和默认路由
我们要连接外网时,外网的网段很多很多,我们该如何愉快地连接外网?下面我们通过Cisco packet模拟环境,并了解NAT和默认路由的使用: NAT(Network Address Translati ...
- （28）Vim 4
1.Vim多窗口编辑 在编辑文件时,有时需要参考另一个文件,如果在两个文件之间进行切换则比较麻烦.可以使用 Vim 同时打开两个文件,每个文件分别占用一个窗口. 例如,在査看 /etc/passwd ...
- Flink-v1.12官方网站翻译-P016-Flink DataStream API Programming Guide
Flink DataStream API编程指南 Flink中的DataStream程序是对数据流实现转换的常规程序(如过滤.更新状态.定义窗口.聚合).数据流最初是由各种来源(如消息队列.套接字流. ...
- HttpRunner（1）自我介绍
前言 首先,我们无论学习哪个框架,都要带着问题,带着思考去学习 思考1:HttpRunner是什么? 思考2:HttpRunner的设计模式是什么? 思考3:为什么我们要学习HttpRunner?他的 ...
- Inceptor Parse error [Error 1110] line 102,24 SQL问题
今天遇到一个SQL跑不通的问题: 去掉cast as 去掉round 最初以为是Inceptor不兼容ORACLE语句Cast as 导致的,做的以下测试 发现都能跑通,说明Cast as语句在Inc ...
- GPTL L3-003 社交集群（并查集）
数据有些弱,Union函数不判不等也可以过. 题意: 依次给出 n 个人的兴趣,不同人兴趣相交.不同兴趣所属人员相交均属于同一集群,求形成的不相交集群个数及每个集群的人数. 思路: 枚举每个兴趣的人员 ...