参考文档——权威

SVG常识

渲染顺序——后来居上:越后面的元素越可见

单位——可以指定,也可以不指定,默认px,其他:em、%、cm、mm...

SVG画布——绘制图像的区域,无限大

SVG视窗——默认300*150,视窗把画布包裹起来,在svg标签设置width和height

超过视窗的元素不可见,是因为有一个overflow: hidden 样式,可以设置overflow: visible 让超出视窗边界的内容变得可见。

SVG坐标系统

SVG的坐标系和计算机绘图的坐标系一致,都是左上角为原点,X轴正方向向下,Y轴的正方向向右,单位为像素

初始坐标系

SVG包含两个坐标系:视窗坐标系和用户坐标系

  • 视窗坐标系就是建立在视窗上的坐标自

  • 用户坐标系是简历在SVG画布上的坐标系,也称当前坐标系

一开始完全重合!但是可以通过viewBox去改变这种默认对齐方式

viewBox

语法:viewBox ="<min-x> <min-y> <width> <height>"

min-xmin-y 决定了 viewBox 的左上角,widthheight 决定了 viewBox 的宽和高。注意 width 或 height 如果设置成 0 ,会禁止元素的渲染。

平移

<min-x> <min-y>对用户坐标系进行平移

注意:可以理解为用户坐标系不动,视窗坐标系相反移动。

缩放

通过改变 width 和 height 的值可以缩放 viewBox 声明的区域。

当 viewBox 的宽高小于视窗的宽高时,相当于放大。

通过百分比和 viewBox 让 SVG 图形进行缩放

如果给视窗设置 width: 100%height: 100%,那么视窗的宽高就由它父元素的宽高决定,我们可以通过调整其父元素的宽高来放大和缩小 SVG 视窗,而不用修改 <svg> 的 width 和 height。仅仅是这样还不够,我们还需要通过 viewBox 来将 SVG 图形放大到整个视窗区域。

HTML5 可缩放矢量图形(2)—SVG基础的更多相关文章

  1. HTML5 可缩放矢量图形(1)—SVG基础

    参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...

  2. HTML5: SVG (可缩放矢量图形)

    ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...

  3. svg可缩放矢量图形

    可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. <svg xmlns="http://www.w ...

  4. SVG(可缩放矢量图形)

        SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C("World Wide W ...

  5. SVG :可缩放矢量图形(Scalable Vector Graphics)。

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 使用 XML ...

  6. SVG基础

    可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准.SVG 是使用 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. SVG基础绘图实例

    SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...

  9. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

随机推荐

  1. 浅谈Spring 5的响应式编程

    这篇使用Spring 5进行响应式编程的入门文章展示了你现在可以使用的一些新的non-blocking, asynchronous.感谢优锐课老师给予的指导! 近年来,由于响应式编程能够以声明性的方式 ...

  2. 7.11 如何应用Varnish

    动态数据缓存 Step 1 修改devault.vcl文件 # This ) # man page for details on VCL syntax and semantics. # # Defau ...

  3. System.Data.SqlClient.SqlException: 'Incorrect syntax near 'OFFSET'.

    https://www.nopcommerce.com/boards/t/54586/410-not-running-on-local-system.aspx#209684 Hello, I was ...

  4. Fréchet Inception Distance(FID)

    计算 IS 时只考虑了生成样本,没有考虑真实数据,即 IS 无法反映真实数据和样本之间的距离,IS 判断数据真实性的依据,源于 Inception V3 的训练集 ------ ImageNet,在 ...

  5. 完全卸载(删除)mac下自带的php

    /private/etc sudo rm -rf php-fpm.conf.defaultphp.ini php.ini.default /usr/bin sudo rm -rf php php-co ...

  6. WebStorm 使用经验

        1.优点 1.1 可自动提示图片的宽高 1.2 标签名字可重构(改名) 1.3 css重命名 1.4 可把内联的style移到外部 1.5 可实现声明提升 1.6 设置项是可搜索的 1.7 有 ...

  7. centos6.5搭建hadoop单节点

    1.添加用户 groupadd  hadoop useradd -d /home/hadoop -m hadoop -g hadoop passwd hadoop    修改密码 付给用户sudo权限 ...

  8. SpringBoot#RestControllerAdvice

    __震惊! 不可避免的访问一些控制器会产生一些异常,这些异常不经处理传递到前台页面,会很难看. 涉及到的注解: org.springframework.web.bind.annotation.Rest ...

  9. Django——include()三种使用方法

    include()的三种使用方法 1.include(module, namespace=None) 2.include(pattern_list)  最常用 3.include((pattern_l ...

  10. 046-unset对静态变量无法销毁

    <?php function digui() { static $count = 0; echo $count; $count++; unset($count); } digui(); digu ...