您的位置:奥门新浦京网址 > Wed前段 > 由一道题彻底弄懂,塑造2010年的网页设计行业的

由一道题彻底弄懂,塑造2010年的网页设计行业的

发布时间:2019-10-22 11:52编辑:Wed前段浏览(66)

    坐标系变化

    现在我们已经讨论了所有可能的SVG变换函数,我们深入挖掘视觉部分和对SVG元素添加每个变换的效果。这是SVG变换最重要的部分。因此它们被称为“坐标系统变换”而不仅仅是“元素变换”。

    在这个说明中,transform属性被定义成两个在被添加的元素上建立新用户空间(当前坐标系)之一-viewBox属性是创建新用户空间的两个属性中的另一个。所以到底是什么意思呢?

    这个行为类似于在HTML元素上添加CSS变换-HTML元素坐标系发生了变换,当你把变换组合使用时最明显。虽然在很多方面很相似,HTML和SVG的变换还是有一些不同。

    主要的不同是坐标系。HTML元素的坐标系建立在元素自身智商。然而,在SVG中,元素的坐标系最初是当前坐标系或使用中的用户空间。

    当你在一个SVG元素上添加transform属性,元素获取当前使用的用户坐标系的一个“副本”。你可以当做给发生变换的元素创建一个新“层”,新层上是当前用户坐标系的副本(the viewBox)。

    然后,元素新的当前坐标系被在transform属性中声明的变换函数改变,因此导致元素自身的变换。这看起来好像是元素在变换后的坐标系中重新绘制。

    要理解如何添加SVG变换,让我们从可视化的部分开始。下面图片是我们要研究的SVG画布。

    图片 1

    鹦鹉和小狗使我们要变换的元素(组<g>)。

    XHTML

    <svg width="800" height="800" viewBox="0 0 800 600"> <g id="parrot"> <!-- shapes and paths forming the parrot --> </g> <g id="dog"> <!-- shapes and paths forming the dog --> </g> </svg>

    1
    2
    3
    4
    5
    6
    7
    8
    <svg width="800" height="800" viewBox="0 0 800 600">
        <g id="parrot">
            <!-- shapes and paths forming the parrot -->
        </g>
        <g id="dog">
            <!-- shapes and paths forming the dog -->
        </g>
    </svg>

    灰色坐标是通过viewBox建立的画布的初始坐标系。为了方便起见,我将不改变初始坐标系-我用一个和视窗相同尺寸的viewBox,如你在上述代码中看到的一样。

    现在我们建立了画布和初始用户空间,让我们开始变换元素。首先让我们把鹦鹉向左移动150单位,向下移动200个单位。

    当然,鹦鹉是由若干路径和形状组成的。只要把transform属性添加到包含它们的组<g>上就行了;这会对整个形状和路径添加变换,鹦鹉会作为一个整体进行变换。查看 article on structuring and grouping SVGs获取更多信息。

    XHTML

    <svg width="800" height="800" viewBox="0 0 800 600"> <g id="parrot" transform="translate(150 200)"> <!-- shapes and paths forming the parrot --> </g> <!-- ... --> </svg>

    1
    2
    3
    4
    5
    6
    <svg width="800" height="800" viewBox="0 0 800 600">
        <g id="parrot" transform="translate(150 200)">
            <!-- shapes and paths forming the parrot -->
        </g>
        <!-- ... -->
    </svg>

    下面图片展示了上述变换后的结果。鹦鹉的半透明版本是变换前的初始位置。图片 2

    SVG中的变换和HTML元素上CSS中的一样简单直观。我们之前提到在元素上添加transform属性时会在元素上创建一个新的当前用户坐标系。下面图片显示了初始坐标系的“副本”,它在鹦鹉元素发生变换时被建立。注意观察鹦鹉当前坐标系是如何变换的。图片 3

    这里需要注意的非常重要的一点是建立在元素上的新的当前坐标系是初始用户坐标系的复制,在里面元素的位置得以保持。这意味着它不是建立在元素边界盒上,或者新的当前坐标系的尺寸受制于元素的尺寸。这就是HTML和SVG坐标系之间的区别。

    建立在变换元素上的新当前坐标系不是建立在元素边界盒上,或者新的当前坐标系的尺寸受制于元素的尺寸。

    我们把小狗变换到画布的右下方时会更加明显。试想我们想要把小狗向右移动50单位,向下移动50单位。这就是狗的最初的坐标以及新的当前坐标系(也因为狗改变)会如何显示。注意小狗的新的坐标系统的原点不在狗边界盒子的左上角。另外注意狗和它新的坐标系看起来它们好像移动到画布新的一层上。图片 4

    现在我们试一试其他事情。不再移动,试着缩放。我们将鹦鹉放大到两倍尺寸:

    XHTML

    <svg width="800" height="800" viewBox="0 0 800 600"> <g id="parrot" transform="scale(2)"> <!-- shapes and paths forming the parrot --> </g> <!-- ... --> </svg>

    1
    2
    3
    4
    5
    6
    <svg width="800" height="800" viewBox="0 0 800 600">
        <g id="parrot" transform="scale(2)">
            <!-- shapes and paths forming the parrot -->
        </g>
        <!-- ... -->
    </svg>

    放缩SVG元素和放缩HTML元素的结果不一样。缩放后SVG元素的在视窗中的位置随着缩放改变。下面图片展示了把鹦鹉放大到两倍时的结果。注意初始位置和尺寸,以及最终位置和尺寸。图片 5

    从上面图片中我们可以注意到不只鹦鹉的尺寸(宽和高)变成了两倍,鹦鹉的坐标(xy)也乘以了缩放因子(这里是两倍)。

    这个结果的原因我们之前已经提到了:元素当前坐标系发生变化,鹦鹉在新系统中绘制。所以,在这个例子中,当前坐标系被缩放。这个效果类似于使用viewBox = "0 0 400 300",等于“放大”了坐标系,因此把里面的内容放大到双倍尺寸(如果你还没有读过请查看这个系列的第一部分)。

    所以,如果我们把坐标系变换形象化来展现当前变换系统中的鹦鹉,我们会得到以下结果:图片 6

    鹦鹉的新的当前坐标系统被缩放,同时“放大”鹦鹉。注意,在它当前的坐标系中,鹦鹉没有重新定位-只有缩放坐标系统才会导致它在视窗中重定位。鹦鹉在新的缩放后的系统中按初始的xy坐标被重绘。

    让我们尝使用不同因子在两个方向上缩放鹦鹉。如果我们添加transform="scale(2 0.5)缩放鹦鹉,我们把宽度变为两倍高度为原来的一半。效果和添加viewBox="0 0 400 1200"类似。图片 7

    注意一下鹦鹉在倾斜后的坐标系中的位置,并且把它和初始系统(半透明的鹦鹉)中的位置做比较:xy位置坐标保持不变。

    在SVG中倾斜元素也导致元素被“移动”,因为它当前的坐标系统被倾斜了。

    试想我们使用skewX函数沿x轴给一只狗增加一个倾斜变化。我们在垂直方向上把狗倾斜了25度。

    XHTML

    <svg width="800" height="800" viewBox="0 0 800 600"> <!-- ... --> <g id="dog" transform="skewX(25)"> <!-- shapes and paths forming the dog --> </g> </svg>

    1
    2
    3
    4
    5
    6
    <svg width="800" height="800" viewBox="0 0 800 600">
        <!-- ... -->
        <g id="dog" transform="skewX(25)">
            <!-- shapes and paths forming the dog -->
        </g>
    </svg>

    下列图片展示了对小狗添加倾斜变换的结果。图片 8

    注意到狗的位置对比初始位置也改变了,因为它的坐标系也被倾斜了。

    下面的图片展示了同样角度的情况下使用skewY()而不是skewX倾斜狗的情况:图片 9

    最后,让我们尝试旋转鹦鹉。旋转默认的中心是当前用户坐标系的左上角。新的建立在旋转元素上的当前系统也被旋转了。在下面的例子中,我们将把鹦鹉旋转45度。旋转方向为顺时针。

    XHTML

    <svg width="800" height="800" viewBox="0 0 800 600"> <g id="parrot" transform="rotate(45)"> <!-- shapes and paths forming the parrot --> </g> <!-- ... --> </svg>

    1
    2
    3
    4
    5
    6
    <svg width="800" height="800" viewBox="0 0 800 600">
        <g id="parrot" transform="rotate(45)">
            <!-- shapes and paths forming the parrot -->
        </g>
        <!-- ... -->
    </svg>

    添加上述变换的结果如下:图片 10

    你很可能想要围绕默认坐标系原点之外的点来旋转一个元素。在transform属性中使用rotate()函数,你可以声明这个点。试想在这个例子中我们想按照它自己的中心旋转这个鹦鹉。根据鹦鹉的宽、高以及位置,我精确计算出它的中心在(150,170)。这个鹦鹉可以围着它的中心旋转。

    XHTML

    <svg width="800" height="800" viewBox="0 0 800 600"> <g id="parrot" transform="rotate(45 150 170)"> <!-- shapes and paths forming the parrot --> </g> <!-- ... --> </svg>

    1
    2
    3
    4
    5
    6
    <svg width="800" height="800" viewBox="0 0 800 600">
        <g id="parrot" transform="rotate(45 150 170)">
            <!-- shapes and paths forming the parrot -->
        </g>
        <!-- ... -->
    </svg>

    在这个时候,这只鹦鹉会被旋转并且看起来如下:图片 11

    我们说变换添加在坐标系上,因此,元素最终被影响并且发生变换。那么究竟如何改变旋转中心工作在坐标系的原点(0,0)的点呢?

    当你改变中心或者旋转时,坐标系被变换或者旋转特定角度,然后再次根据声明的旋转中心产生特定变换。在这个例子中:

    XHTML

    <g id="parrot" transform="rotate(45 150 170)">

    1
    <g id="parrot" transform="rotate(45 150 170)">

    被浏览器当成一系列的移动和旋转等同于:

    XHTML

    <g id="parrot" transform="translate(150 170) rotate(45) translate(-150 -170)">

    1
    <g id="parrot" transform="translate(150 170) rotate(45) translate(-150 -170)">

    当前坐标系变换到你想要的中心店。然后旋转声明的角度。最终系统被负值变换。上述添加到系统的变换如下:图片 12

    在我们进行下一部分讨论嵌套和组合变换前,我想请大家注意建立在变换元素上的当前用户坐标系是独立于建立在其他变换元素之上的其他坐标系的。下列图片展示了建立在狗和鹦鹉上的两个坐标系,以及它们之间是如何保持独立的。图片 13

    另外注意每个当前坐标系仍然处于在外层<svg>容器中使用viewBox属性建立的画布的主要坐标系中。任何添加到viewBox上的变换会影响整个画布以及所有里面的元素,不管它们是否建立了自己的坐标系。

    例如,以下是把整个画布的用户空间从viewBox="0 0 800 600"改成 viewBox="0 0 600 450"的结果。整个画布被缩放,保持任何添加到独立元素上的变换。图片 14

    如何快速判断是否继承?

    其实,在判断继承时,没有那么多的技巧,就只有关键的一点:[[prototype]]__ptoto__)的指向关系

    譬如:

    console.log(instance instanceof SubClass); console.log(instance instanceof SuperClass);

    1
    2
    console.log(instance instanceof SubClass);
    console.log(instance instanceof SuperClass);

    实质上就是:

    • SubClass.prototype是否出现在instance的原型链上
    • SuperClass.prototype是否出现在instance的原型链上

    然后,对照本文中列举的一些图,一目了然就可以看清关系。有时候,完全没有必要弄的太复杂。

    塑造2010年的网页设计行业的那些事

    2011/01/13 · HTML5 · HTML5

    导读:原文由王五翻译,已修正原译文中的一些误译之处。以下是全文。

    在2009年末,我曾坐下来考虑网页设计会向何处发展,当时发生的一切又将走向何方。我提起笔来(确切地说,我是坐在键盘前)写下了《2010年塑造Web的五项科技》,力图总结正在推动我们这个行业发展的科技趋势和行业发展的方向。为了真实的反映过去一年所发生的事,我在本文会讨论一些塑造了2010年网页设计行业的科技和趋势。

    新的标记标准:CSS3 和HTML5

    毫无疑问,在2010年中标记标准有巨大的发展。W3C理事会曾建议在几年之后最终确定CSS3和HTML5语言的地位(原本预计HTML5的地位最终会在2022年确立),可它们却已迅速成为新的标准。

    图片 15

    幸运的是。和IE9一样,当今的浏览器如Safari、Chrome、 Opera、 Firefox,都意识到了CSS3和HTML5对于移动平台和传统电脑桌面的的价值。它们都进了一步,将CSS3和HTML5投入应用,而不再只是做为样本。

    对我而言,当看到2010出版的相关书籍,不少关于CSS3和HTML5的文章标题,如《无情的网页设计业》, 《网页设计者的CSS3》和 《网页设计者的HTML5 》时,我能总能感觉到一些更为切实和权威的意味——这只是冰山的一角。

    图片 16

    伴随对新语言的性能进行的无数实验和概念验证,网站设计者和浏览器供应商有了新的觉悟,这也把他们引入了主流。

    也许开始赢得众多怀疑论者的是这些新规范在IE9中的应用——在最常用的浏览器中的重新运用——结果很受欢迎。微软浏览器的标准基于(大部分)其它浏览器供应商正在使用的标准,这意味着CSS3和HTML5在现今的项目中还是可以用的。

    图片 17

    IE9或许还不能支持CSS3和HTML5的所有特性,如你在谷歌浏览器和火狐浏览器中所看到的那样,但微软的工程师的确已经做出了很大转变,朝正确方向的转变。

    即使在得到各种浏览器的全面支持之前,JavaScript助手资源库也扮演了很重要的角色,使得我们可以使用新CSS和HTML的特性。开放源代码项目如:Modernizr,HTML5 shiv, 和 HTML5 Boilerplate继续帮助网页设计者和网络开发者通过这些新的标记语言标准日益提升其产品的性能,同时又能迎合那些已经过时的浏览器。

    网页排版

    图片 18

    使用CSS @font-face规则排版对网页设计也有很大的帮助。新的网络服务如Google Font API 和Font Deck,以及原有的TypeKit使得设计者可以跳出原来少量的网络安全字体的限制而有了更多的选择。

    移动互联网

    图片 19

    2010年1月17日,苹果公司发布了iPad。iPad、笔记本电脑、MacBook Air和Android smartphones之类的超级便携电脑,使浏览器脱离了传统的静态桌面,转向沙发、机场休息室、火车及公园长凳上,实际上可以说是所有能接收无线网络信号的地方。

    另一方面,去年有许多关于CSS3设计网页的讨论(和更多的应用)方面的媒体调查和反馈,使设计的网站可以在多种不同的平台展示。

    通过设计iPad应用程序、设计现有网站的易用的移动版本、使用平果软件开发工具包设计iPhoner应用程序或利用开放的技术即设计HTML5 语言的iPhone程序, 很多设计者已经进入移动网络领域。

    社交网络

    2010年网络社交继续发展,甚至还有一部关于网络社交的电影!毋庸置疑现在网络社交比任何时候都要流行。对很多人而言,Facebook就是因特网。

    我们已经看到了网络社交的文化效应,如某人网上的推特,还有Gap,这个国际大公司在Twitter和Facebook用户公开批评其选择后改换了公司标志。

    有人说,并不是所有的网络社交理念都实现了, Google Wave做到了,谁不同意?

    JavaScript

    如果我问你在去年JavaScript做为一种标记语言发生了哪些变化,你或许发现并没有多少。新的JavaScript在开发方面的进展有些让人失望,尽管ECMAScript 5让人看到了JS引擎在现代浏览器中局部地应用(如FireFox)。

    无论怎样,在去年通过做为CSS3和HTML5的业务引擎,JavaScript已为网页设计者和网络开发者所熟悉。JavaScript是HTML5中许多令人兴奋的功能的驱动程序, 如canvas的APIs, 音频, 视频, 网络存储等。我们可以看到服务器端面脚本语言在项目中的应用(如node, JS)使客户端和服务器端和服务器端面实现无缝对接。

    简而言之,JavaScrip比以往更流行了。Promote JS之类的项目对做到更好的文件编制有所助益并且激发了对JavaScript的讨论。

    2010年下半年涌现出大量的新的JavaScript的博客,同时原有的博客的关注度也大为提高。JavaScript周刊等通讯刊物高调报道了关于JavaScript的相关新闻。

    图片 20

    JavaScript在新闻报道中被提及的次数较之2010年以前大为增加(通过Google Trends 的统计可以看出),这一数据证明了JavaScript在主流设计领域中正日益流行。

    原文:sixrevisions  译文:王五

     

    赞 收藏 评论

    图片 21

    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]

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

    写在最后的话

    由于继承的介绍在网上已经多不胜数,因此本文没有再重复描述,而是由一道Date继承题引发,展开。(关键就是原型链)

    不知道看到这里,各位看官是否都已经弄懂了JS中的继承呢?

    另外,遇到问题时,多想一想,有时候你会发现,其实你知道的并不是那么多,然后再想一想,又会发现其实并没有这么复杂。。。

    1 赞 1 收藏 评论

    图片 22

    transform属性值

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

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

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

    分析问题的关键

    借助stackoverflow上的回答

    Skew

    SVG元素也可以被倾斜,要倾斜一个元素,你可以使用一个或多个倾斜函数skewX 和 skewY

    skewX(<skew-angle>) skewY(<skew-angle>)

    1
    2
    skewX(<skew-angle>)
    skewY(<skew-angle>)

    函数skewX声明一个沿x轴的倾斜;函数skewY声明一个沿y轴的倾斜。

    倾斜角度声明是无单位角度的默认是度。

    注意倾斜一个元素可能会导致元素在视窗中重新定位。在下一节中有更多细节。

    ES6大法

    当然,除了上述的ES5实现,ES6中也可以直接继承(自带支持继承Date),而且更为简单:

    class MyDate extends Date { constructor() { super(); this.abc = 1; } getTest() { return this.getTime(); } } let date = new MyDate(); // 正常输出,譬如1515638988725 console.log(date.getTest());

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class MyDate extends Date {
        constructor() {
            super();
            this.abc = 1;
        }
        getTest() {
            return this.getTime();
        }
    }
     
    let date = new MyDate();
     
    // 正常输出,譬如1515638988725
    console.log(date.getTest());

    对比下ES5中的实现,这个真的是简单的不行,直接使用ES6的Class语法就行了。

    而且,也可以正常输出。

    注意:这里的正常输出环境是直接用ES6运行,不经过babel打包,打包后实质上是转化成ES5的,所以效果完全不一样

    Rotation

    你可以使用rotate()函数来旋转SVG元素。这个函数的语法如下:

    CSS

    rotate(<rotate-angle> [<cx> <cy>])

    1
    rotate(<rotate-angle> [<cx> <cy>])

    rotate()函数对于给定的点和 旋转角度值执行旋转。不像CSS3中的旋转变换,不能声明除degress之外的单位。角度值默认无单位,默认单位是度。

    可选的cxcy值代表无单位的旋转中心点。如果没有设置cxcy,旋转点是当前用户坐标系的原点(查看第一部分如果你不知道用户坐标系是什么。)

    在函数rotate()中声明旋转中心点一个快捷方式类似于CSS中设置transform: rotate()transform-origin。SVG中默认的旋转中心是当前使用的用户坐标系的左上角,这样也许你无法创建想要的旋转效果,你可以在rotate()中声明一个新的中心点。如果你知道元素在SVG画布中的尺寸和定位,你可以把它的中心设置为旋转中心。

    下面的例子是以当前用户坐标系中的(50,50)点为中心进行旋转一组元素:

    XHTML

    <g id="parrot" transform="rotate(45 50 50)" x="0" y="0"> <!-- elements making up a parrot shape --> </g>

    1
    2
    3
    <g id="parrot" transform="rotate(45 50 50)" x="0" y="0">
        <!-- elements making up a parrot shape -->
    </g>

    然而,如果你想要一个元素围绕它的中心旋转,你也许想要像CSS中一样声明中心为50% 50%;不幸的是,在rotate()函数中这样做是不允许的-你必须用绝对坐标。然而,你可以在CSS的transform属性中使用transform-origin属性。这篇文章后面会讨论更多细节。

    为什么无法被继承?

    首先,看看MDN上的解释,上面有提到,JavaScript的日期对象只能通过JavaScript Date作为构造函数来实例化。

    图片 23

    然后再看看stackoverflow上的回答:

    图片 24

    有提到,v8引擎底层代码中有限制,如果调用对象的[[Class]]不是Date,则抛出错误。

    总的来说,结合这两点,可以得出一个结论:

    要调用Date上方法的实例对象必须通过Date构造出来,否则不允许调用Date的方法

    理解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坐标系和变换(第三部分)-建立新视窗

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

    大纲

    • 先说说如何快速快速寻求解答
      • stackoverflow上早就有答案了!
      • 倘若用的是中文搜索。
    • 分析问题的关键
      • 经典的继承法有何问题
      • 为什么无法被继承?
    • 该如何实现继承?
      • 暴力混合法
      • ES5黑魔法
      • ES6大法
      • ES6写法,然后babel打包
    • 几种继承的细微区别
    • ES6继承与ES5继承的区别
    • 构造函数与实例对象
    • [[Class]]与Internal slot
    • 如何快速判断是否继承?
    • 写在最后的话

    使用CSS属性变换SVGs

    在SVG2中,transform属性简称transform属性;因为SVG变换已经被引入CSS3变换规范中。后者结合了SVG变化,CSS2 2D变换和CSS 3D变换规范,并且把类似transform-origin 和 3D transformations引入了SVG。

    声明在CSS变换规范中的CSS变换属性可以被添加到SVG元素上。然而,transform属性函数值需要遵循CSS规范中的语法声明:函数参数必须逗号隔开-空格隔开是不允许的,但是你可以在逗号前后引用一两个空格;rotate()函数不接受<cx><cy>值-旋转中心使用transform-origin属性声明。另外,CSS变换函数接受角度和坐标单位,例如角度的rad(radians)和坐标的px,em等。

    使用CSS来旋转一个SVG元素看起来如下:

    CSS

    #parrot { transform-origin: 50% 50%; /* center of rotation is set to the center of the element */ transform: rotate(45deg); }

    1
    2
    3
    4
    #parrot {
        transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
        transform: rotate(45deg);
    }

    SVG元素也可以使用CSS 3D变换在三维空间中变换。依然要注意坐标系,然而,不同于建立在HTML元素上的坐标系。这意味着3D旋转看起来也不同除非改变旋转中心。

    CSS

    #SVGel { transform: perspective(800px) rotate3d(1, 1, 0, 45deg); }

    1
    2
    3
    #SVGel {
        transform: perspective(800px) rotate3d(1, 1, 0, 45deg);
    }

    因为通过CSS来变换SVG元素非常类似于通过CSS来变换HTML元素-语法层面-在这篇文章中我将跳过这个部分。

    另外,在写这篇文章的时候,在一些浏览器中实现一些特性是不可能的。因为浏览器支持改变很快,我建议你实验一下这些属性来决定哪些可以工作哪些不可以,决定什么现在可以用什么不可以。

    注意一旦CSS变换可以完全实现在SVG上,我依然建议你使用CSS变换函数语法即使你用transform属性的形式添加变换。也就是说,上面提到的transform属性函数的语法还是有效的。

    [[Class]]与Internal slot

    这一部分为补充内容。

    前文中一直提到一个概念:Date内部的[[Class]]标识

    其实,严格来说,不能这样泛而称之(前文中只是用这个概念是为了降低复杂度,便于理解),它可以分为以下两部分:

    • 在ES5中,每种内置对象都定义了 [[Class]] 内部属性的值,[[Class]] 内部属性的值用于内部区分对象的种类
      • Object.prototype.toString访问的就是这个[[Class]]
      • 规范中除了通过Object.prototype.toString,没有提供任何手段使程序访问此值。
      • 而且Object.prototype.toString输出无法被修改
    • 而在ES5中,之前的 [[Class]] 不再使用,取而代之的是一系列的internal slot
      • Internal slot 对应于与对象相关联并由各种ECMAScript规范算法使用的内部状态,它们没有对象属性,也不能被继承
      • 根据具体的 Internal slot 规范,这种状态可以由任何ECMAScript语言类型或特定ECMAScript规范类型值的值组成
      • 通过Object.prototype.toString,仍然可以输出Internal slot值
      • 简单点理解(简化理解),Object.prototype.toString的流程是:如果是基本数据类型(除去Object以外的几大类型),则返回原本的slot,如果是Object类型(包括内置对象以及自己写的对象),则调用Symbol.toStringTag
      • Symbol.toStringTag方法的默认实现就是返回对象的Internal slot,这个方法可以被重写

    这两点是有所差异的,需要区分(不过简单点可以统一理解为内置对象内部都有一个特殊标识,用来区分对应类型-不符合类型就不给调用)。

    JS内置对象是这些:

    "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"

    1
    "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"

    ES6新增的一些,这里未提到:(如Promise对象可以输出[object Promise]

    而前文中提到的:

    Object.defineProperty(date, Symbol.toStringTag, { get: function() { return "Date"; } });

    1
    2
    3
    4
    5
    Object.defineProperty(date, Symbol.toStringTag, {
        get: function() {
            return "Date";
        }
    });

    它的作用是重写Symbol.toStringTag,截取date(虽然是内置对象,但是仍然属于Object)的Object.prototype.toString的输出,让这个对象输出自己修改后的[object Date]

    但是,仅仅是做到输出的时候变成了Date,实际上内部的internal slot值并没有被改变,因此仍然不被认为是Date

    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)用逗号来分隔值的形式声明一样有效。

    ES6写法,然后Babel打包

    虽然说上述ES6大法是可以直接继承Date的,但是,考虑到实质上大部分的生产环境是:ES6 + Babel

    直接这样用ES6 + Babel是会出问题的

    不信的话,可以自行尝试下,Babel打包成ES5后代码大致是这样的:

    图片 25

    然后当信心满满的开始用时,会发现:

    图片 26

    对,又出现了这个问题,也许这时候是这样的⊙?⊙

    因为转译后的ES5源码中,仍然是通过MyDate来构造
    MyDate的构造中又无法修改属于Date内部的[[Class]]之类的私有标志,
    因此构造出的对象仍然不允许调用Date方法(调用时,被引擎底层代码识别为[[Class]]标志不符合,不允许调用,抛出错误)

    由此可见,ES6继承的内部实现和Babel打包编译出来的实现是有区别的。
    (虽说Babel的polyfill一般会按照定义的规范去实现的,但也不要过度迷信)。

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:由一道题彻底弄懂,塑造2010年的网页设计行业的

    关键词: