摘要：元素元素归属于容器和结构元素，在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾，它将出现在西瓜的前面。例如，将葡萄的茎的路径移动到组的末尾将导致茎在顶部。
简介作者：DDU（沪江前端开发工程师）
本文是原文翻译，转载请注明作者及出处。
Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径，图片和（或）文本组成，并能够在不失真的情况下任意变换尺寸。
本书主要介绍了内联SVG，它是指在HTML中编写的嵌入式代码，以便在浏览器中生成这些图形。
以这种方式使用SVG有许多优点，包括为了交互目的访问所有图形的各个部分，支持访问 SVG 文档构成的 DOM 节点树，查询、修改 DOM 节点的属性，提升用户可访问性。
先介绍基本组织和简单形状，再继续描述SVG坐标系或“Canvas”，然后用它绘制图形的内部和/或边框，变换，以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。
这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能，有助于你学习SVG。 它面向设计师和开发人员，希望以最可行的方式将SVG添加到他们的工作流程中。
从小笔画细节到开始使用手工制作的模式，本指南旨在成为一个围绕“go-to”编写SVG的参考。
前言本“口袋指南”只针对已经有一些HTML和CSS基础的人，在你喜爱的浏览器中绘制SVG之前最好知道一些额外的知识, 例如：在SVG中正确渲染的信息，如何让你的图形更容易访问，以及何时何处使用矢量图形软件。
如何使用SVG有许多方法可以把SVG插入到你的项目：内联、img标签、背景图、
尽管我们只是介绍了内联SVG的使用方法，但在某些特定情况下，其他方法也许会更好。例如，如果你不需要图形本身的编辑功能或访问其各个部分，则用--> 第一节：篇章组织
SVG详细信息位于
如上所述，内联图形可以“手动”编写，或者通过访问由矢量图形软件生成的XML代码来嵌入。因为这些图形元素的顺序决定了它们的堆叠顺序，所以无论哪种方式，正确的组织和结构对于编写高效的SVG代码至关重要的。
组织和语义SVG文档片段由
本节将介绍编写SVG的关键 -
svg 元素此元素中使用的属性（如width，height，preserveAspectRatio和viewBox）定义正在写入图形的画布。
当从某些矢量软件获得SVG代码时，在
g 元素g元素是组合相关图形的容器元素。将此元素与描述和标题元素结合使用提供图形的相关信息，并将相关图形组件分在同一组在一起提高访问性。 此外，通过相关元素分在同一组，可以将它们看作一个整体与各个独立的部分。移动这些元素尤其方便，例如，可以移动整个组。 不包含在g中的任何元素则认为有它们自己的组。
use 元素 defs 元素虽然
HTML中的其他元素的堆叠顺序可以CSS中的z-index操纵，但SVG不能。 SVG元素的堆叠顺序完全取决于它们在文档片段中的位置。 下面的葡萄和西瓜在同一个
如果包含葡萄的组被移动到文档的末尾，它将出现在西瓜的前面。
这种定型的堆叠顺序的方法也适用于组内的每一个元素。例如，将葡萄的茎的路径移动到组的末尾将导致茎在顶部。
第二节：基本形状和路径当你需要在HTML中使用更复杂的内联SVG图形时就没有办法再手工编写了。那些更复杂的图形可以使用矢量软件创建，但现在我们来学习下手动编码的基础。
基本形状SVG包含以下基本形状元素集：矩形，圆形，椭圆形，直线，折线和多边形。每个元素在渲染之前需要一些属性，如坐标和大小等详细信息。
矩形width和height属性确定矩形的大小，而fill则设置形状的内部颜色。数值默认为pixels，当未指定时，fill将默认为黑色。 其他属性还有x和y坐标。这些值将图形沿
也可以通过指定rx和ry属性中的值来创建圆角。例如，rx =“5”ry =“10”将产生具有5px半径的角的水平边，以及具有10px半径的角的垂直边。
圆形基于中心点和外半径设置
cx和cy坐标建立圆的中心相对于由
椭圆当cx和cy值基于到SVG坐标空间中的像素距离建立中心点时，rx和ry值定义形状的边的半径。
直线line元素定义具有开始点和结束点的直线。
x1和y1值确定线的开始坐标，而x2和y2值确定线的结束坐标。
折线在整个形状中points的值在x和y轴上建立形状的位置，并且在整个值列表中被分组为x，y。不能使用奇数点。
多边形多边形形状的点通过八组的x，y值来定义。
该元素还可以根据点的数量产生其他闭合形状。
路径元素SVG路径表示形状的轮廓。此形状可以填充，描边，并用于导航文本和/或用作剪切路径。 当涉及许多曲线时，这个路径会变得非常复杂。然而，理解工作原理和涉及的语法将有助于管理这些特定路径。
path data路径数据包含在
下面的
moveto命令（M或m）建立一个新的点，就像提起一支钢笔，并在纸上一个新位置绘制。包括路径数据的代码行必须以moveto命令开始，如上面的例子所示。 moveto命令跟在初始化路径之后，代表新子路径的开始和复合路径的创建。这里的大写字母M表示绝对坐标，小写字母m表示相对坐标。
closepathclosepath（Z或z）表示当前子路径的结束，并从该点到路径的初始点绘制直线。 如果closepath之后紧跟着一个moveto，这些moveto坐标表示下一个子路径的开始。如果这个相同的closepath之后是moveto之外的任何东西，则下一个子路径从当前子路径的点开始。 这里大写或小写z没有区别。
linetolineto命令从当前点到新点绘制直线。
L, lL和l命令从当前点绘制一条线到下一个提供的点坐标。这个新点然后变成当前点，以此类推。 大写L表示绝对定位，而小写l是相对定位。
H, hH和h命令从当前点绘制水平线。
大写H表示绝对定位，而小写h是相对定位。
V和v命令从当前点绘制垂直线。
大写V表示绝对定位，而小写v是相对定位。
有三组命令绘制曲线路径：CubicBézier（C，c，S，s），二次贝塞尔（Q，q，T，t）和椭圆弧（A，a）。 以下曲线部分将介绍每条曲线命令的基本概念，和映射的详细信息，然后提供一个图表供进一步了解。
Cubic BézierC和c CubicBézier命令从当前点绘制曲线，使用（x1，y1）参数作为曲线开始处的控制点，（x2，y2）作为结束处的控制点，定义形状细节曲线。
S和s命令还绘制立方贝塞尔曲线，但在这种情况下，存在第一控制点是第二控制点的反射的假设。 下面的代码绘制了一个基本的CubicBézier曲线：
该曲线的第一和最后一组值将影响其开始和结束位置，两个中心值将影响曲线本身在开始和结束时的形状和定位。 S和s命令也绘制立方贝塞尔曲线，但在这种情况下，假设第一个控制点是前一个C命令的最后一个控制点的反映。则会作为相对于S命令的开始点。
大写字母C表示绝对定位，而小写字母c是相对定位。S和s也是一样。
Quadratic Bézier二次贝塞尔曲线（Q，q，T，t）类似于立方贝塞尔曲线，除了它只有一个控制点。
以下代码绘制了一个基本的二次贝塞尔曲线：
操作第一个和最后一组值M20,50和100,50会影响曲线起点和终点的位置。中心值集Q40,5定义曲线的控制点，确定其形状。
Q和q使用（x1，y1）作为控件从初始点到终点绘制曲线。 T和t通过假设控制点是相对于新的T或t命令的开始点的先前列出的命令的控制的反映，从初始点到终点绘制曲线。
大写的Q信号表示绝对定位，而小写的q是相对定位。T和t也是一样。
Elliptical Arc椭圆弧（A，a）定义椭圆的线段。这些段通过A或命令创建，通过指定起点，终点，x和y半径，旋转和方向创建弧。
下面是一个基本椭圆弧的代码：
该路径中的第一和最后一组值，M65,10和50,25表示初始和最终坐标，而第二组值定义两个半径。 1,0（大弧标志和顺时针标志）的值确定如何绘制圆弧，因为这里有四个不同的选项。 下图显示了四个弧选项以及大弧标志值和顺时针标志值对弧段的最终渲染的影响。
矢量软件嵌入矢量图形软件可以制作更复杂的形状和路径，同时可以导出SVG代码在其他地方使用和操作。
一旦图形完成，生成的XML代码可以被复制并嵌入到HTML中，图形越复杂代码越长。分解SVG的每个部分并且运用适当的组织元素可以极大地帮助引导和理解这些复杂和冗长的代码。
这里是一些樱桃的SVG代码图像，添加了引导类：
svg元素中的属性定义工作区，或图形的“画布”。叶和茎在一个g（组）内，而樱桃在另一个。数字字符串定义图形将采用的路径，fill和stroke属性设置背景和边框的颜色。
将这个代码复制下来，它会通过一个SVG优化器在被放置在HTML之前，以助于消除不必要的代码和间距，进而大大缩小文件。 关于这个方面Peter Collingridge的SVG Optimiser和SVGO也是非常有用的工具。
致谢我用这一整节的内容来表达对你们特别的感谢：
CSS-Tricks(http://css-tricks.com/)
Lincoln Loop(http://lincolnloop.com/)
Designmodo(https://designmodo.com/)
Tahoe Partners(http://www.tahoepartners.com/)
Una Kravets(https://twitter.com/Una)
原文地址：http://svgpocketguide.com/book/
剩余部分将在编写SVG的口袋指南（下）中展示，敬请期待。
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
>> 沪江Web前端上海团队招聘【Web前端架构师】，有意者简历至：zhouyao@hujiang.com <<
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112583.html
摘要：元素元素归属于容器和结构元素，在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾，它将出现在西瓜的前面。例如，将葡萄的茎的路径移动到组的末尾将导致茎在顶部。 作者：DDU（沪江前端开发工程师）本文是原文翻译，转载请注明作者及出处。 简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径，图片和（或）文本组成，并能...
摘要：引言不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。合法性验证合法的使用，并利用的工具进行检查。 如果本文档中有任何错误的、不符合行规的，敬请斧正。 引言 不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 若您对本文档中任何内容有不明白的，或者感觉不合行规的，请您按以下格式向我邮件说明，同时也欢迎任何人参与讨论，共同完善本文...
摘要：然而学习布局，你只要学习几个手机端页面自适应解决方案布局进阶版附源码示例前端掘金一年前笔者写了一篇手机端页面自适应解决方案布局，意外受到很多朋友的关注和喜欢。 十分钟学会 Fiddler - 后端 - 掘金一.Fiddler介绍 Fiddler是一个http抓包改包工具，fiddle英文中有欺骗、伪造之意，与wireshark相比它更轻量级，上手简单，因为只能抓http和https数据...
摘要：和这样的预处理器，让我们的代码保持良好的结构和可维护性。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。而你是无法对预处理器中的变量做上面这些操作的。 本文翻译自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处：葡萄城官网，葡萄城...
摘要：要使用闭包，需要在另一个函数中创建一个函数，这种函数被称为嵌套函数。只有名为闭包的功能才能对此进行访问。结论闭包是外部函数中的变量集合，它提供对内部函数作用域的访问以保护全局命名空间。 翻译：疯狂的技术宅https://medium.freecodecamp.o... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 闭包是函数创建时作用域内所有变量的集合。...
阅读 2105·2021-11-25 09:43
阅读 2679·2021-11-24 09:39
阅读 1172·2021-09-02 15:34
阅读 2825·2019-08-30 11:10
阅读 989·2019-08-29 16:34
阅读 490·2019-08-29 13:25
阅读 3270·2019-08-29 11:21
阅读 2754·2019-08-26 11:39
