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在这篇文章 ...
随机推荐
- odoo-nginx 配置
p.p1 { margin: 0; font: 12px "Andale Mono"; color: rgba(40, 254, 20, 1); background-color: ...
- HDU2222 Keywords Search__AC自动机
Keywords Search Time Limit: 1000MS Memory Limit: 131072KB 64bit IO Format: %I64d & %I64u Sub ...
- fastHttp服务端处理请求的过程
Github 地址 https://github.com/valyala/fasthttp fastHttp 服务端的处理请求的过程 工作过程 主要代码 设置监听地址 server.go func ( ...
- (G)I-DLE—화(火花) （HWAA）
闲来无事又来推歌了/cy 我这博客好像只能用来更日记+推歌了/kk 到今天(G)I-DLE已经获得九个一位啦~ 歌真的挺不错的 特别是,一个韩国女团出了这首歌的中文版 就觉得很有好感 music 韩文 ...
- Docker系列（一）Docker概述,核心概念讲解,安装部署
部分内容参考链接: Docker实战总结(非常全面,建议收藏) 一. Docker概述 Docker是一个开源的应用容器引擎(基于Go语言开发),让开发者可以打包他们的应用以及依赖包到一个可移植的容器 ...
- jQuery——通过Ajax发送数据
Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML),一个Ajax解决方案涉及如下技术: JavaScript:处理与用户及其他浏览器相关事件的 ...
- DEDECMS的20位MD5加密密文解密
解密20位md5,20位md5加密算法. dedecms的20位md5加密算噶是从32位md5中截取的20位,所以去掉前3位喝最后1位,即可获得16位md5值,即可破解15位md5. 例如: ...
- Java反射开窍--1
1.通过案例引出反射并体会反射的好处 案例:美团外卖 --->付款 --->要么用微信支付 要么用支付宝支付 package com.zhaoss.test01; //接口的制定方:美团外 ...
- ES模块化的导入和导出
目录 环境准备 模块化 export.import export import import * as export default import 和 require 的区别 参考 环境准备 三个文件 ...
- Codeforces Round #655 (Div. 2) A. Omkar and Completion
题目链接:https://codeforces.com/contest/1372/problem/A 题意 构造一个大小为 $n$ 的数组 $a$,要求满足 $1 \le a_i \le n$,且不存 ...