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. WireGuard 教程：使用 DNS-SD 进行 NAT-to-NAT 穿透

    原文链接:https://fuckcloudnative.io/posts/wireguard-endpoint-discovery-nat-traversal/ WireGuard 是由 Jason ...

  2. 大型面试现场：一条update sql执行都经历什么？

    导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 24 篇. 今天我要跟你分享的MySQL话题是:"从一条update sql执行都经历什么开始,发散开一系列的问题,看看你能抗到第几 ...

  3. SpringMVC请求参数的获取方式

    一.GET请求参数获取 1. 通过HttpServletRequest获取参数 2. 直接方法参数获取 3. RequestParam注解方式获取请求参数 4. Bean方式获取参数 5. Model ...

  4. linux驴杂记

    1. 命令行 vim下 的Ctrl + S ,ctrl +Q: 这个功能可以用于长时间编译的时候随时把屏幕输出停住,但是编译仍然会继续,这样就不会影响到编译时间了. S:是锁屏  q:是开屏 2. S ...

  5. 《C++ Primer Plus》啃书计 第1~4章

    <C++ Primer Plus>啃书计 第1~4章 第一章 预备知识 1.1-1.3略过 1.4 程序创建的技巧 1. cfront,它将C++源代码翻译成C源代码,然后再使用标准C编译 ...

  6. mitmproxy使用详解

    mitmproxy 相比Charles.fiddler的优点在于,它可以命令行方式或脚本的方式进行mock mitmproxy不仅可以像Charles那样抓包,还可以对请求数据进行二次开发,进入高度二 ...

  7. 2019牛客暑期多校训练营（第七场）H.Pair（数位dp）

    题意:给你三个数A,B,C 现在要你找到满足  A and B >C 或者 A 异或 B < C 的对数. 思路:我们可以走对立面 把既满足 A and B <= C 也满足 A 异 ...

  8. 【noi 2.5_7834】分成互质组（dfs）

    有2种dfs的方法: 1.存下每个组的各个数和其质因数,每次对于新的一个数,与各组比对是否互质,再添加或不添加入该组. 2.不存质因数了,直接用gcd,更加快.P.S.然而我不知道为什么RE,若有好心 ...

  9. enumerate() -- Python

    #!usr/bin/env python #coding:utf-8 ''' enumerate()说明: 1.enumerate()是Python的内置函数: 2.enumerate字面上是枚举.列 ...

  10. 2.了解nginx常用的配置

    作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-07-10 20:56:10 星期三 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...