使用HTML5和SVG在僵尸天启中生存

分享于 

21分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

当浏览器采用HTML5时,开发人员发现更多和更多的选项来创建优雅高响应的ui。 在可以缩放矢量图形( SVG )的情况下,旧的又是新的,而且相当光滑。

SVG规范已经存在了一段时间了。 从 1999开始,规范或者更精确的一系列规格描述了一种基于xml的矢量图形文件格式。 SVG block 定义矢量图像的各个组件,如路径。形状。填充。笔触和其他特征。 这为某些可能在 Adobe Illustrator或者Inkscape中创建的图形提供了轻量级选项,然后导出到光栅格式。 它还承诺在动态操作图像方面有大量潜在的功能,因此SVG的"可以缩放"部分。

广泛采用HTML5标准,浏览器在使用CSS来创建或者操作客户端,使SVG图像能够在客户端创建或者操作,从而使SVG能够在新的方向上使用 SVG。

为了演示,本系列演练将以两种方式为人类造福。 其中,它将覆盖跨浏览器兼容的SVG示例,同时指出SVG采用中的一些差异。 两个,它将更加或者 LESS 准确地预测一个死尸的终点的可以能性。

第一步:准备

开始之前,了解哪些浏览器将成为目标是很有帮助的。 虽然所有现代浏览器在一定程度上都采用了 SVG,但它的实现仍然有很多不同。 例如同步多媒体集成语言( SMIL ) 规范描述了如何通过 <动画的> 元素来动画 SVG。 这样,开发者就有机会随时增加用户交互和独立属性,而不必离开 <svg> 元素。 然而,并非所有的浏览器都能识别 SVG/smil动画( 尽管SVG动画的替代形式确实存在)。

of可以使用。"。"。"( http://caniuse.com/ ) 对所有主要桌面和移动网页浏览器进行了全面的side-by-side比较。 特别有用的是它对特定SVG特性( 如使用内联 SVGSVG过滤效果的drill,这已经被添加到 IE 10.

步骤2: 创建SVG元素

这个特殊的SVG丧尸天启生存预测器将使用三个单独的SVG元素: 用于危险因素的窗格和预测表本身的窗格。

首先,创建一个名为"citybox"的600 root 元素:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Planning for the Zombie Apocalypse with HTML5 and SVG</title><script></script><style></style></head><body><svgid="cityBox"width="600"height="400"></svg></body></html>

看,隐形盒子,这是Zombieland的冬天。 可以通过CSS样式添加边框,使用 <svg> 元素本身中的"样式"属性或者通过定义 header 中的样式:

<style> #cityBox {
 border: 1px solid #000000;float: left; }</style>

第三步:添加文本

开发人员有许多处理文本的方法,通过SVG打开大量有趣的选项,比如改变字符偏移。

但是,在尝试上述任何操作之前,请向 cityBox 元素添加标题:

<svgid="cityBox"width="600"height="400"><textx="300"y="50"> Surviving the Zombie Apocalypse
 </text></svg>

图 1: 带有 <文本>的SVG元素

x,y 坐标定义第一个字符的基线。 从这个例子中删除它们,文本几乎消失在SVG元素的顶部。

SVG文本元素的样式有三种风格: "样式"属性,定义的样式或者单独的SVG属性。 注意,根据使用的方法和浏览器,某些属性似乎会出现错误。 例如定义" font-family"对所有浏览器都适用,无论它在哪里。 但是," font-size"实现不一致。 在 <样式> header 中定义它在 Chrome 或者 IE 中都不工作。 如以下示例所示,在 <文本> 元素的"样式"属性中定义它,在 Chrome 中工作,但在 IE 中不适用:

<text x="300" y="50"id="titleText" style="font-size: 36;">

在这两个浏览器中,惟一的技术是将" font-size"定义为 <text> 标签中的属性。 因此,出于演示目的和最大 跨浏览器 兼容性,这是在这里完成的。

<text x="300" y="50"font-family="sans-serif" font-size="36" 
 text-anchor="middle" stroke="#000000" fill="#000000">

注意,与CSS一样,笔触和填充颜色可以使用颜色名称或者十六进制值。 还要注意" text-anchor"属性,它定义文本相对于x。y 原点的位置。 由于默认值为"左边",本示例将它设置为" middle"并定义原点点为 <svg> 元素的中心。

下面是关于"文本锚点"和文本的另一个有趣的怪癖: 如果 <文本> 元素超出了 <svg> 元素的边界,接下来会发生什么情况取决于浏览器。 在 Chrome 中,<svg> 元素边缘以外的任何东西都被切断。 但是,在 IE 中,文本扩展到 <svg> 元素的边界之外。

SVG文本与其他矢量图像一样,具有笔画和填充。 默认情况下,<text> 元素显示一个 black 填充,没有任何笔划。 在本例中,添加了一个黑色的笔画,如图 2所示。 它不仅会增加文本,而且会在本系列的后面看到,画面的颜色可以被动画。

图 2: 带格式的<文本> 元素

步骤4: 图像

SVG的点表现为创建图形,有时最好将现有的SVG图形合并到页面上,而不是从头创建。 如果你正使用vector设计软件 created Adobe Illustrator Design Adobe或者 inkscape,例如从SVG剪贴画库( 如 Wiki Commons ) 中获取图形,那么这一点就特别重要。

僵尸启示录生存预测器的城市面板最终将显示僵尸启示录的所有元素。 但开始时,只有一个人。 一个terrified的人在他的( 或者她) 生活中奔跑。 在这种情况下,人类最初以Inkscape开始,并被保存为SVG文件( human.svg )。 ( 注:本演练中使用的全部svg图形文件均由 http://openclipart.org 提供,并且可以从 ______。 )

可以通过两种不同的方式使用 <图像> 元素,其中之一是跨浏览器支持的,另一种是不支持的。

首先,最简单的方法在 <svg> 元素中,添加以下内容:

<image id="human" x="275" y="175" width="50" height="50" xlink:href="human.svg"/>

这个标记添加了在外部(" human.svg") and文件,并将它的放置在 275,175,这是补偿图像大小之后的中心。 谈到尺寸,图像被缩放到 50 x50. 在这种情况下,不需要知道原始文件的大小。 图像被自动转换,以便它的最大的维度 MATCHES 为指定参数,另一个维度按比例进行缩放。 结果应该类似于图 3

图 3。在 Chrome 上自动缩放SVG图像

不幸的是,它并不总是像这样出现。 在 many Firefox IE,width和height属性定义视图区域而不是像图size从左上角坐标开始,如图。

图 4.在 Firefox 和 IE 上自动缩放SVG图像

有几种方法可以解决这个问题。 一是编辑图像本身,并将它的调整到所需尺寸。 但是这种defeats的图形的用途。 因此,转换将被应用。

在文本编辑器中打开" human.svg"文件将显示元数据中的当前图像维度,在这种情况下:

width="342.70523"height="482.82114"

但不要被欺骗,这些属性可以手动编辑,所有的东西都会出现。 不这样。由于嵌入在SVG文件中的其他XML数据,更改宽度/高度将导致基于浏览器的不可预测的图像掩码。

相反,使用宽度和高度值创建新的<image> 元素:

<image id="human" x="2750"y="1750" width="343" height="483"transform="scale(.10,.10)" xlink:href="human.svg"/>

在本示例中,宽度和高度设置为图像值( 圆形)的实际值。 缩放最大尺寸( 高度: 483 ) 降低到 10 %,可以创建足够接近 50套印的图像。 请注意,"转换"属性也影响元素来源。 所以,原始x,y 坐标 275,175需要更改为 2750,1750 ( 将原始值除以比例金额): 275/.1 = 2750,保持相同的布局。 图 5中的结果来自 IE。

图 5: transform=scale的<图像> 元素,如 IE 中所见

现在恐慌的小人在每个浏览器里看起来都一样。 或者至少为该演练测试的每个浏览器。

第五步:基本

现在有些复杂的东西已经就绪了,控制面板 将返回大多数SVG教程开始的基础知识: 简单形状。SVG定义了几个形状元素: <line>,<rect>,<circle>,<ellipse>,<多边形> 和 <polyline>。 还可以使用 <路径> 元素创建全新的形状,也可以使用。

预测 控制面板 由三角形"步骤"控件组成,用于缩放数量。文本标签和带有图像的几个圆。 首先,创建 <svg> 元素及其样式( 现在有一个 1像素的边框用于开发目的)。

在 <样式> 下添加以下内容:

#controlPanelBox {
 border: 1px solid #000000;
 float: left;
}

在页面的<正文中添加:

<svgid="controlPanelBox"width="400"height="400"></svg>

对于创建三角形,<多边形> 和 <路径> 元素都可以很好地工作。 以下两个元素看起来相同,如图 6 所示:

<polygonpoints="50,50 100,25 100,75"stroke="black"stroke-width="1"fill="red"/><pathd="M 50 50 L 100 25 L 100 75 L 50 50"stroke="black"stroke-width="1"fill="red"/>

图 6: <多边形> ( 左边) 和 <路径> ( 右)

使用 <polygon> 元素,多边形中的每个点都是绝对定义的,并且形状自动填充。 在 <路径> 元素中,原点在数据("") 属性中定义为 Moveto ("m") 值。 succeeding ("") point绘制路径,以起点点结束。 最后一点将关闭路径并创建多边形形状。 如果没有它,红色的填充仍然是三角形的形状,但是笔划将丢失它的最后一个腿。

path的一个好技巧是 MovetoLineto 值可以是 relative,只需使用 lowercase 而不是大写。 这样就可以简单地通过改变 Moveto 值来轻松地移动路径。 例如以下两个元素的形状相同,与图 6 相同。

<pathd="M 50 50 L 100 25 L 100 75 L 50 50"stroke="black"stroke-width="1"fill="red"/><pathd="M 50 50 l 50 -25 l 0 50 l -50 -25"stroke="black"stroke-width="1"fill="red"/>

因此,多边形通常更容易创建,而 relative 路径对于 控制面板 来说更有意义。 将使用几个三角形,因此可以创建两个版本( 镜像镜像),然后通过更改M 值复制和重新定位。

每个控件集也将有几个 <text> 元素作为标签和文本字段。 后面的这些将在本系列后面的基于与控件交互的基础上通过JavaScript进行修改。

因此,对于 控制面板 中的第一个参数,现有的人工填充,元素集合应该如下所示:

<path id="zombieLess" d="M 50 50 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red"/>
<text id="zombieLabel" font-size="15" font-family="sans-serif" 
 text-anchor="middle" fill="red" x="175" y="25"> City Population (000s)</text><text id="zombieText" font-size="25" font-family="sans-serif" 
 text-anchor="middle" fill="black" x="175" y="60">0</text><path id="zombieMore" d="M 300 50 l -50 -25 l 0 50 l 50 -25" 
 stroke="black" stroke-width="1" fill="red"/>

图 7: 带有城市Populaton控件的controlPanelBox元素

元素可以嵌套在 <g> 元素中,作为额外的奖励。 可以将组作为整体命名。样式化和操作,并将结果应用于组的每个成员。 在这种情况下,每个控件只针对组织进行分组。

由于 relative 路径定义,快速复制和粘贴创建两个相同控件集的开始。 在更改迁移点,<text> 原点,id和文本内容之后,页面现在有三个步骤控件:

<g id="zombieGroup"> <path id="zombieLess" d="M 50 50 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red"/>
 <text id="zombieLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="25"> City Population (000s)
 </text> <text id="zombieText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="black" x="175" y="60">0</text> <path id="zombieMore" d="M 300 50 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red"/></g><g id="mallGroup"> <path id="mallLess" d="M 50 150 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red"/>
 <text id="mallLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="125"> # of Shopping Malls
 </text> <text id="mallText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="black" x="175" y="160">0</text> <path id="mallMore" d="M 300 150 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red"/></g><g id="redneckGroup"> <path id="redneckLess" d="M 50 250 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red"/>
 <text id="redneckLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red" x="175" y="225"> Rednecks
 </text> <text id="redneckText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="black" x="175" y="260">0</text> <path id="redneckMore" d="M 300 250 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red"/></g>

图 8: 带有 relative <路径> 元素的controlPanelBox元素

对于最后一组控件,这里应用程序需要最基本的形状: 循环。<循环> 元素通过定义三个主要属性来工作: 中心x cx"),中心y (" cy") 和半径(" r")。 默认情况下,填充为 black,而笔画不存在。 但是

由于这是一个切换控制,当前选择由粗。红笔划指示,而非活动选择是薄的black 笔划。 它们都有白色填充,形成一个可以保存图像的圆形。 或者僵尸。

<circleid="slowCircle"cx="75"cy="325"r="40"stroke="red"fill="white"stroke-width="4"/><circleid="fastCircle"cx="275"cy="325"r="40"stroke="black"fill="white"stroke-width="2"/>

图 9: 僵尸圆

在图像的实际尺寸被定义为图形的实际尺寸,然后应用"转换"属性来缩放图像的时候,就像处理图像的实际尺寸一样。 原始大小的16. 这个比例也适用于x,y 原点。 此外,由于SVG元素按顺序呈现,因此图像需要在圆之后出现:

<circleid="slowCircle"cx="75"cy="325"r="40"stroke="red"fill="white"stroke-width="4"/><imageid="slowZombie"x="375"y="1875"width="175"height="304"transform="scale(.16,.16)"xlink:href="zombie.svg"/><circleid="fastCircle"cx="275"cy="325"r="40"stroke="black"fill="white"stroke-width="2"/><imageid="fastZombie"x="1630"y="1875"width="175"height="304"transform="scale(.16,.16)"xlink:href="zombie.svg"/>

图 10: 僵尸带僵尸圈

最后添加一个标签/文本字段对,并将整个内容组合在一起:

<gid="speedGroup"><circleid="slowCircle"cx="75"cy="325"r="40"stroke="red"fill="white"stroke-width="4"/><imageid="slowZombie"x="375"y="1875"width="175"height="304"transform="scale(.16,.16)"xlink:href="zombie.svg"/><textid="speedLabel"font-size="15"font-family="sans-serif"text-anchor="middle"fill="red"x="175"y="315">Zombie Speed</text><textid="speedText"font-size="25"font-family="sans-serif"text-anchor="middle"fill="red"x="175"y="350">Slow</text><circleid="fastCircle"cx="275"cy="325"r="40"stroke="black"fill="white"stroke-width="2"/><imageid="fastZombie"x="1630"y="1875"width="175"height="304"transform="scale(.16,.16)"xlink:href="zombie.svg"/></g>

在这个过程中,僵尸启示录生存预测器应该像图 11

图 11.完成的僵尸启示录生存预测器( 到目前为止)

结束语

显然,在它的当前状态下使用预测器的任何人都是。 或者undead的肉可能是。 或者仅仅是食品,本系列中的下一步将在这里处添加一个窗格,用于预测比例。

同时,可以在以下位置查看项目:

http://justinwhitney.com/zombies/zombies_part1.htm

可以在以下位置查看SVG的其他示例:

SVG骰子

http://ie.microsoft.com/testdrive/Performance/SVGDice/Default.xhtml#

SVG渐变 background Maker

http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

IE 10中的SVG过滤效果

http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

SVG直升机

http://ie.microsoft.com/testdrive/Performance/Helicopter/Default.xhtml

这篇文章是 Justin Whitney写的。 贾斯汀在德州农村的一个仓库中建立网站和移动应用程序,同时准备文明。


Html5  SVG