构建高性能WEB之HTTP首部优化,理解SVG坐标系统和

理解SVG坐标系统和变换: transform属性

2015/09/23 · HTML5 · SVG

原文出处: SaraSoueidan   译文出处:Blueed@Ivan_z3   

SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性,包括如何使用,以及你必须知道的关于SVG坐标系变换的知识。

这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容;更具体的是, SVG viewport, viewBox 和 preserveAspectRatio 属性。

  • 理解SVG坐标系和变换(第一部分)-viewport,viewBox,和preserveAspectRatio
  • 理解SVG坐标系和变换(第二部分)-transform属性
  • 理解SVG坐标系和变换(第三部分)-建立新视窗

这一部分我建议你先阅读第一篇,如果没有,确保你在阅读这篇之前已经读了第一篇。

关于CSS Reset那些事(1):历史演变与Normalize.css

2015/08/01 · CSS · CSS Reset, Normalize.css

原文出处: Alsiso   

构建高性能WEB之HTTP首部优化

2015/10/03 · HTML5, JavaScript · HTTP

本文作者: 伯乐在线 - 十三号线上的蝼蚁 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

transform属性值

tranform属性用来对一个元素声明一个或多个变换。它输入一个带有顺序的变换定义列表的<transform-list>值。每个变换定义由空格或逗号隔开。给元素添加变换看起来如下:

有效地SVG变换有:旋转缩放移动, 和倾斜transform属性中使用的变换函数类似于CSS中transform属性使用的CSS变换函数,除了参数不同。

注意下列的函数语法定义只在transform属性中有效。查看section about transforming SVGs with CSS properties获取关于CSS变换属性中使用的语法信息。

前言

近期在翻阅陈旧的历史资料,整理之前饱受争议的CSS Reset问题,不过好像十多年过去,现在大家统一了口径,纷纷推荐使用Normalize.css,包括Bootstrap都进行了内置使用,可见它的认可程度之高。

由于文章涉及内容较多,会分为系列文章

第一章
整理CSS Reset历史的演变痕迹,从第一份CSS Reset的诞生,到提出No CSS Reset的思想,再到国产CSS Reset 1.0骄傲的诞生;最终时过境迁,CSS Reset被Normalize.css所替代;
随后开始认识Normalize.css,了解它都做了那些事情,诉说与CSS Reset的区别,突出优势,告诉你为什么要使用它。

第二章
由于Normalize.css只提供了英文文档,没有提供对应的中文版本,所以从这章开始对其源码进行翻译整理与解读,本章包含 html与body,HTML5元素,链接,语义化文本标签,内嵌元素,群组元素等内容解读。

第三章,
继续来介绍源码中的表单和表格部分,并且整理一份normalize-zh.css中文注释的版本上传至Github,供大家参考使用,敬请期待

0×00 前言

在讨论浏览器优化之前,首先我们先分析下从客户端发起一个HTTP请求到用户接收到响应之间,都发生了什么?知己知彼,才能百战不殆。这也是作为一个WEB开发者,为什么一定要深入学习TCP/IP等网络知识

Matrix

你可以使用matrix()函数在SVG元素上添加一个或多个变换。matrix变换语法如下:

matrix(<a> <b> <c> <d> <e> <f>)

1
matrix(<a> <b> <c> <d> <e> <f>)

上述声明通过一个有6个值的变换矩阵声明一个变换。matrix(a,b,c,d,e,f)等同于添加变换matrix[a b c d e f]

如果你不精通数学,最好不要用这个函数。对于那些精通的人,你可以在这里阅读更多关于数学的内容。因此这个函数很少使用-我将忽略来讨论其他变换函数。

CSS Reset 历史回顾

0×01 到底发生什么了?

当用户发起一个HTTP请求时,首先客户端将与服务端之间建立TCP连接,成功建立连接后,服务端将对请求进行处理,并对客户端做出响应,响应内容一般包括响应主体。
(此处我们仅简单说明,但真实的一次请求其中发生的事情是相当复杂的,这里贴条连接,讲得比较详细)。
从输入 URL 到页面加载完成的过程中都发生了什么事情?

Translation

要移动SVG元素,你可以用translate()函数。translate函数的语法如下:

CSS

translate(<tx> [<ty>])

1
translate(<tx> [<ty>])

translate()函数输入一个或两个值得来声明水平和竖直移动值。tx代表x轴上的translation值;ty代表y轴上的translation值。

ty值是可选的,如果省略,默认值为0txty值可以通过空格或者逗号分隔,它们在函数中不代表任何单位-它们默认等于当前用户坐标系单位。

下面的例子把一个元素向右移动100个用户单位,向下移动300个用户单位。

<circle cx="0" cy="0" r="100" transform="translate(100 300)" />

1
<circle cx="0" cy="0" r="100" transform="translate(100 300)" />

上述代码如果以translate(100, 300)用逗号来分隔值的形式声明一样有效。

第一份 CSS Reset

为什么会有CSS Reset的存在呢?那是因为早期的浏览器支持和理解的CSS规范不同,导致浏览器在渲染页面时效果不一致,出现很多兼容性问题。 关于 浏览器的默认样式 请点击查阅!

根据玉伯的文章中透漏,最早的一份CSS Reset来自Tantek 的undohtml.css,从URL中的日期可以看出时间是2004年,Tantek根据自身需要对于一些标签进行了简单的重置,源码如下:

CSS

/* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved. */ :link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote, fieldset,input{ margin:0; padding:0 } a img,:link img,:visited img { border:none } address { font-style:normal }

1
2
3
4
5
6
7
8
9
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

建立TCP连接

为了进行可靠的数据传输,TCP在进行发送数据之前,会进行TCP三次握手,以此确定接收方能够成功收取传输的数据,而建立连接的过程,必然是要耗费系统资源,以及时间资源的。

Scaling

你可以通过使用scale()函数变换来向上或者向下缩放来改变SVG元素的尺寸。scale变换的语法是:

CSS

scale(<sx> [<sy>])

1
scale(<sx> [<sy>])

scale()函数输入一个或两个值来声明水平和竖直缩放值。sx代表沿x轴的缩放值,用来水平延长或者拉伸元素;sy代表沿y轴缩放值,用来垂直延长或者缩放元素。

sy值是可选的,如果省略默认值等于sxsxsy可以用空格或者逗号分隔,它们是无单位值。

下面例子把一个元素的尺寸根据最初的尺寸放大两倍:

XHTML

<rect width="150" height="100" transform="scale(2)" x="0" y="0" />

1
<rect width="150" height="100" transform="scale(2)" x="0" y="0" />

下列例子把一个元素缩放到最初宽度的两倍,并且把高度压缩到最初的一半:

XHTML

<rect width="150" height="100" transform="scale(2 0.5)" x="0" y="0" />

1
<rect width="150" height="100" transform="scale(2 0.5)" x="0" y="0" />

上述例子使用逗号分隔的值例如scale(2, .5)仍然有效。

这里需要注意当SVG元素缩放时,整个坐标系被缩放,导致元素在视窗中重新定位,现在不用担心这些,我们会在下一节中讨论细节。

CSS Reset 核心代码与作用

随后加入到CSS RESET的行列的大牛越来越多,比如业界领袖 YUI团队 以及Eric Meyer把这份CSS Reset变的更加充实,但是大家不难发现代码的核心部分还是重置,从此可以结论出早期的CSS Reset的作用就是清除所有浏览器默认样式,让它一切归零!

CSS

* { margin:0; padding:0 }

1
* { margin:0; padding:0 }

不过在此之后一段时间,有人开始批判这种暴力清零的CSS Reset方式,随后部分前端开发者们也传来一些争议声音,比如:

  1. *{ margin:0; padding:0; }会带来性能问题
  2. 使用通配符存在隐性问题
  3. 过渡的标签重置等于画蛇添足
  4. 过渡的标签重置导致语言元素失效

注:由于都是一些陈旧的老问题,就不提供出处了,再此不过多讨论,感兴趣Google~

服务端处理并响应

当服务端接收到客户端发送来的请求之后,如果请求内容是静态资源,服务端会从硬盘中取出静态资源,然后将静态资源放在响应主体中,发送给客户端。如果是动态资源,服务端首先取出资源,并通过业务逻辑操作,动态生成最终的响应主体,然后发送给客户端。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:构建高性能WEB之HTTP首部优化,理解SVG坐标系统和

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。