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://flaviocopes.com/svg/

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

SVG viewBox & coordinate system的更多相关文章

  1. Coordinate System

    Coordinate System Introduction of Different Coordinate Systems Cartesian Coordinate System UI Coordi ...

  2. IOS深入学习（4）之Coordinate System

    1 前言 在IOS中相信大家会经常跟一些bounds,frame之类的打交道,这不免会涉及坐标系统,今天我们就来介绍一下Coordinate System(坐标系). 2 详述 坐标系统是定位,大小, ...

  3. ArcGIS坐标系转换出错：Error 999999执行函数出错 invalid extent for output coordinate system

    本文主要介绍在用ArcGIS做坐标系转换过程中可能会遇到的一个问题,并分析其原因和解决方案. 如下图,对一份数据做坐标系转换: 过了一会儿,转换失败了.错误消息如下: “消息”中提示,“执行函数出错 ...

  4. SVG (viewBox) & DOM (viewport)

    SVG (viewBox) & DOM (viewport) circle "use strict"; /** * * @author xgqfrms * @license ...

  5. SVG ViewBox

    如果svg图形太大或者太小,就可以用ViewBox属性来调整在页面中的显示范围.大小. "像素不能直接换算成英寸.厘米,要在 dpi ( dot per inch 分辨率,概念较多,鼠标 d ...

  6. Silverlight & Blend动画设计系列十：Silverlight中的坐标系统（Coordinate System）与向量（Vector）运动

    如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平 ...

  7. 深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio

    本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个 ...

  8. 理解SVG的viewport,viewBox,preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  9. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

随机推荐

  1. 静电、浪涌与TVS

    ESD和浪涌问题往往是基带工程师最头疼的问题,因为测试标准严苛,问题神出鬼没.特别是ESD问题,没有解决问题的标准路径,只能靠反复地构思方案并验证.想要尽量避免以上问题,就必须选择合适的防护器件,设计 ...

  2. 为什么在使用LESS 除法计算时会出问题

    hello,各位小伙伴们好,最近一直有小伙伴问我为什么写Less的时候,发现除法有了问题,在生成的css文件中,不给我们输出正确结果了. 直接抛结论: LESS 版本升级,EasyLess插件 新版本 ...

  3. Java三种IO模型和LinuxIO五种IO模型

    Java: https://github.com/Snailclimb/JavaGuide/blob/master/docs/java/BIO-NIO-AIO.md https://github.co ...

  4. 6.DHCP配置故障转移（Windows2012）

    准备: 子网对应核心交换机网关配置多个中继 interface Vlan64 ip address 10.10.64.1 255.255.248.0 ip helper-address 10.10.1 ...

  5. 第2层交换和生成树协议(STP)__散知识点

    1.交换式服务 网桥是基于软件的,而交换机使用专用集成电路(ASIC)来创建并维护其过滤表.2层交换机和网桥转发数据的速度比路由器快一些,因为它们不查看网络层报头的信息,不对数据包做任何修改.相反,在 ...

  6. TCP/IP__TCP协议

    1.定位:传输控制协议(Transmission Control Protocol),是一种面向连接的.可靠的.基于字节流的传输层通信协议. 2.原理:应用层向TCP层发送用于网间传输的.用8位字节表 ...

  7. （3）UNIX/Linux系统结构

    UNIX/Linux 系统可以粗糙地抽象为 3 个层次,如图所示.底层是 UNIX/Linux 操作系统,即系统内核(Kernel):中间层是Shell层,即命令解释层:高层则是应用层. 1) 内核层 ...

  8. Malaysia Trip Memory ('-ωก)

    独白 ​ 初次见面,睡意阑珊.日轮.稀疏.惨白色.墨绿色,\(\rho_{atm}>\rho_{space}\) 的作用被赤道所隐藏,一时的不知所从,斑斓成了单一.之后的故事,踏上一辆盛装打扮的 ...

  9. HDU-6703 array （线段树）

    题意 一个长度为n的排列a,\(\forall i\in [1,n] ,1\le a_i \le n\) , m次操作,每次操作: (1,pos),把 \(a_{pos}\) 变为\(a_{pos} ...

  10. GPTL L3-003 社交集群（并查集）

    数据有些弱,Union函数不判不等也可以过. 题意: 依次给出 n 个人的兴趣,不同人兴趣相交.不同兴趣所属人员相交均属于同一集群,求形成的不相交集群个数及每个集群的人数. 思路: 枚举每个兴趣的人员 ...