HTML5 可缩放矢量图形(2)—SVG基础
参考文档——权威
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-x
和 min-y
决定了 viewBox 的左上角,width
和 height
决定了 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基础的更多相关文章
- HTML5 可缩放矢量图形(1)—SVG基础
参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...
- HTML5: SVG (可缩放矢量图形)
ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...
- svg可缩放矢量图形
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. <svg xmlns="http://www.w ...
- SVG(可缩放矢量图形)
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C("World Wide W ...
- SVG :可缩放矢量图形(Scalable Vector Graphics)。
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 使用 XML ...
- SVG基础
可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准.SVG 是使用 ...
- SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- SVG基础绘图实例
SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
随机推荐
- 浅谈Spring 5的响应式编程
这篇使用Spring 5进行响应式编程的入门文章展示了你现在可以使用的一些新的non-blocking, asynchronous.感谢优锐课老师给予的指导! 近年来,由于响应式编程能够以声明性的方式 ...
- 7.11 如何应用Varnish
动态数据缓存 Step 1 修改devault.vcl文件 # This ) # man page for details on VCL syntax and semantics. # # Defau ...
- 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 ...
- Fréchet Inception Distance(FID)
计算 IS 时只考虑了生成样本,没有考虑真实数据,即 IS 无法反映真实数据和样本之间的距离,IS 判断数据真实性的依据,源于 Inception V3 的训练集 ------ ImageNet,在 ...
- 完全卸载(删除)mac下自带的php
/private/etc sudo rm -rf php-fpm.conf.defaultphp.ini php.ini.default /usr/bin sudo rm -rf php php-co ...
- WebStorm 使用经验
1.优点 1.1 可自动提示图片的宽高 1.2 标签名字可重构(改名) 1.3 css重命名 1.4 可把内联的style移到外部 1.5 可实现声明提升 1.6 设置项是可搜索的 1.7 有 ...
- centos6.5搭建hadoop单节点
1.添加用户 groupadd hadoop useradd -d /home/hadoop -m hadoop -g hadoop passwd hadoop 修改密码 付给用户sudo权限 ...
- SpringBoot#RestControllerAdvice
__震惊! 不可避免的访问一些控制器会产生一些异常,这些异常不经处理传递到前台页面,会很难看. 涉及到的注解: org.springframework.web.bind.annotation.Rest ...
- Django——include()三种使用方法
include()的三种使用方法 1.include(module, namespace=None) 2.include(pattern_list) 最常用 3.include((pattern_l ...
- 046-unset对静态变量无法销毁
<?php function digui() { static $count = 0; echo $count; $count++; unset($count); } digui(); digu ...