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在这篇文章 ...
随机推荐
- UVA11694 Gokigen Naname题解
目录 写在前面 Solution Code 写在前面 UVA的题需要自己读入一个 \(T\) 组数据,别被样例给迷惑了 Solution 每个格子只有两种填法且 \(n \le 7\),暴力搜索两种填 ...
- 引入 Gateway 网关，这些坑一定要学会避开！！！
Spring cloud gateway是替代zuul的网关产品,基于Spring 5.Spring boot 2.0以上.Reactor, 提供任意的路由匹配和断言.过滤功能.上一篇文章谈了一下Ga ...
- Django(静态文件or路由)
静态文件 在开发中同创会使用到 css,js,img等静态文件,这里带大家简单的介绍一下django如何处理静态页面, 配置 setting.py文件 STATIC_URL = '/static/' ...
- java判断是否为整数
/** * 判断是否为整数 * * @param str 传入的字符串 * @return 是整数返回true,否则返回false */ public static boolean isInteger ...
- jvm系列五-java内存模型(2)
原作者系列文章链接:并发编程系列博客传送门 前言# 在网上看了很多文章,也看了好几本书中关于JMM的介绍,我发现JMM确实是Java中比较难以理解的概念.网上很多文章中关于JMM的介绍要么是照搬了一些 ...
- httprunner（6）配置信息config
前言 每个测试用例都应该有config部分,可以配置用例级别.比如name.base_url.variables.verify.export等等 案例演示 from httprunner import ...
- The Preliminary Contest for ICPC Asia Shenyang 2019 D. Fish eating fruit（树形dp）
题意:求一棵树上所有路径和模3分别为0 1 2 的权值的和 思路:树形dp 增加一个记录儿子节点满足条件的个数的数组 不要放在一起dp不然答案跟新会有问题 #include <bits/stdc ...
- Java-Graphics类的绘图方法实现
Java-Graphics(画图类) 就比如画一个矩形,你给出矩形左上角坐标,再给出矩形长度和宽度就可以在JFrame上画出来一个矩形 除了矩形之外,还可以画椭圆.圆.圆弧.线段.多边形.图像等 下面 ...
- codeforces629C Famil Door and Brackets (dp)
As Famil Door's birthday is coming, some of his friends (like Gabi) decided to buy a present for him ...
- POJ_2112 二分图多重匹配
题意: //题意就是给你k个挤奶池和c头牛,每个挤奶池最多可以来m头牛,而且每头牛距离这k这挤奶池//有一定的距离,题目上给出k+c的矩阵,每一行代表某一个物品距离其他物品的位置//这里要注意给出的某 ...