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. 20201104gryz模拟赛解题报告

    写在前面 \(Luckyblock\) 良心出题人, 题面好评 T1还是蛮简单的,用一个栈来维护就能过(某天听说 \(Luckyblock\) 出了套题,T1是个考栈的,看来就是这道了 注:栈的清空只 ...

  2. Spring Boot 系列总结

    Spring Boot 系列总结 1.SpringBoot自动装配 1.1 Spring装配方式 1.2 Spring @Enable 模块驱动 1.3 Spring 条件装配 2.自动装配正文 2. ...

  3. Web漏洞扫描-Burp Suite

    Web漏洞扫描-Burp Suite 一.Burp Suite概述 二.功能及特点 三.Burp Suite安装 四.Burp Suite使用 一.Burp Suite概述 安全渗透界使用最广泛的漏扫 ...

  4. Linux性能分析：生产环境服务器变慢，诊断思路和性能评估

    Linux性能分析:生产环境服务器变慢,诊断思路和性能评估 一.整机:top 二.CPU:vmstat 所有CPU核信息 每个进程使用CPU的用量分解信息 三.内存:free 四.硬盘:df 五.磁盘 ...

  5. Mybatis（二）实例练习

    文章目录 实例练习Mybatis,实现一个简单的登录功能. 增.删.改:操作返回Int类型. 查询操作返回实体对象. 首先需要导入相关的包. #导包: #建表 在数据库中新建一个用户mybatis,然 ...

  6. linux常用命令（shell脚本常用命令）（grep、cut、sort、uniq、seq、tr、basename、dirname）

    本章命令: 1 2 3 4 5 6 grep cut sort uniq seq tr 1.grep 作用:过滤文本内容 选项 描述 -E :--extended--regexp 模式是扩展正则表达式 ...

  7. js中的逻辑运算符详解(||、&&、!)

    视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...

  8. linux（10）linux vi/vim

    前言 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是vim编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的 ...

  9. Linux换行符和Windows换行符的区别与转换

    不同系统文本文件的行尾换行符不同:    Windows为一个回车'\r'(CR或^M)和一个换行'\n'(NL或LF)(括号内是其它显示方法)    Linux为一个换行'\n'    Mac为一个 ...

  10. MySQL常用SQL语句2

    -- 1创建student和score表 CREATE TABLE Student( Id INT(10) PRIMARY KEY auto_increment, Name VARCHAR(20) N ...