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. Shell 简单入门教程

    大数据开发岗为什么要学习Shell呢?1)需要看懂大数据运维岗人员编写的Shell程序.2)偶尔会编写一些简单Shell程序来管理集群.提高开发效率 艺多不压身 Shell是一个命令行解释器,它接受应 ...

  2. Hash Map集合和Hash Set集合

    HashMap集合的使用 1.1.每个集合对象的创建(new) 1.2.从集合中添加元素 1.3.从集合中取出某个元素 1.4.遍历集合 public class HashMapTest { publ ...

  3. tp5项目部署Linux环境后无法访问解决

    一.编辑fastcgi.conf文件 vim /www/server/nginx/conf/fastcgi.conf 二.添加代码 fastcgi_param PHP_ADMIN_VALUE &quo ...

  4. 渗透测试工具-sqlmap

    简单来说:一个用来做sql注入攻击的工具 安装 1,下载sqlmap.zip,下载环境: 打开sqlmap官网https://github.com/sqlmapproject/sqlmap/ :下载p ...

  5. Phoenix简介概述，Phoenix的Java API 相关操作优秀案例

    Phoenix简介概述,Phoenix的Java API 相关操作优秀案例 一.Phoenix概述简介 二.Phoenix实例一:Java API操作 2.1 phoenix.properties 2 ...

  6. Java并发包源码学习系列：基于CAS非阻塞并发队列ConcurrentLinkedQueue源码解析

    目录 非阻塞并发队列ConcurrentLinkedQueue概述 结构组成 基本不变式 head的不变式与可变式 tail的不变式与可变式 offer操作 源码解析 图解offer操作 JDK1.6 ...

  7. E 快速排序

    :以下代码可以从数组a[]中找出第k小的元素. 它使用了类似快速排序中的分治算法,期望时间复杂度是O(N)的. 请仔细阅读分析源码,填写划线部分缺失的内容. #include <stdio.h& ...

  8. 2019 徐州网络赛 M Longest subsequence t

    对于答案来说,一定是 前 i-1 个字符和 t的前 i 个一样,然后第 i 个字符比 t的 大 \(i\in [1,m]\) 前缀为t,然后长度比t长 对于第一种情况,枚举这个 i ,然后找最小的 p ...

  9. Windows10与虚拟机中CentOS-7.2进行telnet通信 出现在端口23处失败【解决】

    (telnet服务是由xinetd守护,所以安装和启动都要用到xinetd) 1.先检查CentOS7.0是否已经安装以下几个安装包:telnet-server.telnet.xinetd.命令如下: ...

  10. B. Queue

    During the lunch break all n Berland State University students lined up in the food court. However, ...