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在这篇文章 ...
随机推荐
- 一个sql盲注小工具 (Golang版)
并发,二分法判断. 源码写的有点垃圾,有点乱,结果也存在一些缺失. 记录: sql:select distinct 中的distinct选项,这是只会获取你表中不重复数据,是表中,而不是你一次sql执 ...
- Linux提权常用漏洞速查表
漏洞列表 #CVE #Description #Kernels CVE–2018–18955 [map_write() in kernel/user_namespace.c allows privil ...
- Spring boot AOP 实现Redis 存储
package com.carloan.common.web.annotation; import java.lang.annotation.*; /** * 自定义redis缓存注解.只要在serv ...
- OpenStack (云计算与openstck简介)
云计算 什么是云计算 云计算是一种按使用量付费的模式,这种模式提供可用的,便捷的,按需的网络访问,通过互联网进入可配置的计算资源共享池(资源包括,计算,存储,应用软件和服务) 云计算的特征 易于管理: ...
- 算法-迪杰斯特拉算法（dijkstra）-最短路径
迪杰斯特拉算法(dijkstra)-最短路径 简介: 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中 ...
- jvm系列五-java内存模型(2)
原作者系列文章链接:并发编程系列博客传送门 前言# 在网上看了很多文章,也看了好几本书中关于JMM的介绍,我发现JMM确实是Java中比较难以理解的概念.网上很多文章中关于JMM的介绍要么是照搬了一些 ...
- Python实现量子态采样
什么是量子态矢量? 在前面一篇量子系统模拟的博客中,我们介绍了使用python去模拟一个量子系统演化的过程.当我们尝试理解量子态和量子门操作时,可以通过其矩阵形式的运算来描述量子态演化的过程: \[\ ...
- 2019牛客暑期多校训练营（第七场）F-Energy stones（思维+树状数组）
>传送门< 题意:有n块能量石,每秒钟会增加Li的能量,但是一旦增长到了Ci它就不会增长了,它初始的能量为Ei. 现在有若干个时刻ti,会选择下标在[Si,Ti]的能量石吸取它们的能量,这 ...
- Codeforces Round #680 (Div. 2, based on Moscow Team Olympiad)【ABCD】
比赛链接:https://codeforces.com/contest/1445 A. Array Rearrangment 题意 给定两个大小均为 \(n\) 的升序数组 \(a\) 和 \(b\) ...
- Educational Codeforces Round 88 (Rated for Div. 2) B. New Theatre Square（贪心）
题目链接:https://codeforces.com/contest/1359/problem/B 题意 有一块 $n \times m$ 的地板和两种瓷砖: $1 \times 1$,每块花费为 ...