技术控

    今日:125| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] The SVG `path` Syntax: An Illustrated Guide

[复制链接]
女人能输不能哭 发表于 2016-10-4 03:22:30
404 25

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It's a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason to the rhyme. I'm no expert here, but I thought it would be fun to dig into.
  Here's an example of a medium-complexity path, I'd say:
  [code][/code]  We could reformat it to start making sense of it (still valid code):
     The letters are commands . The numbers are passing values to those commands. All the commas are optional (they could be spaces).
   For example, that first command is M . M says, in a metaphorical sense, pick up the pen and move it to the exact location 213.1, 6.7 . Don't draw anything just yet, just move the location of the Pen. So that if other commands do drawing, it now starts at this location.
   M is just one of many path commands. There are 18 of them by my count.
   Many (but not all of them) come in a pair. There is an UPPERCASE and a lowercase version. The UPPERCASE version is the absolute version and the lowercase is the relative version. Let's keep using M as an example:
  
       
  • M 100,100 means "Pick up the pen and move it to the exact coordinates 100,100"   
  • m 100,100 means "Move the Pen 100 down and 100 right from wherever you currently are."  
  Many commands have that same setup. The lowercase version factors in where the "pen" currently is.
  Let's look at two absolute commands:
  Followed by a relative command:
   Just like the M and m commands, L and l take two numbers: either absolute or relative coordinates. There are four other commands that are essentially simpler versions of the line commands. They also draw lines, but only take one value: horizontal or vertical. When we used l 25,0 we could have used h 25 which means "from where the pen currently is, draw 25 to the right. More succinct, I suppose. It's bigger brother H , as we could guess, means to draw to the exact horizontal coordinate 25. V and v move vertically absolutely and relatively as you'd surely guess.
  Check out this Chris Nager demo in which he draws a cross in an extremely tiny amount of code, thanks to relative coordinate drawing:
   See the Pen Hand drawn SVG rounded plus by Chris Nager ( @chrisnager ) on CodePen .
   See the very last character Chris used there? Z . Z (or z , it doesn't matter) "closes" the path. Like any other command, it's optional. It's a cheap n' easy way to draw a straight line directly back to the last place the "pen" was set down (probably the last M or m command). It saves you from having to repeat that first location and using a line command to get back there.
  Let's look at the commands we've covered so far.
               M x,y      Move to the absolute coordinates x,y              m x,y      Move to the right x and down y (or left and up if negative values)              L x,y      Draw a straight line to the absolute coordinates x,y              l x,y      Draw a straight line to a point that is relatively right x and down y (or left and up if negative values)              H x      Draw a line horizontally to the exact coordinate x              h x      Draw a line horizontally relatively to the right x (or to the left if a negative value)              V y      Draw a line vertically to the exact coordinate y              v y      Draw a line vertically relatively down y (or up if a negative value)              Z (or z )      Draw a straight line back to the start of the path            So far we've looked at only straight lines. Path is a perfectly acceptable element and syntax for that, although it could be argued that elements like might have an even easier syntax for straight-line shapes, if slightly more limited.
  The superpower of path is curves! There are quite a few different types.
   Remember the first bit of example code we looked at used a lot of C and c commands. Those are "Bezier Curves" and require more data do their thing.
  The C command takes three points. The first two points define the location of two bezier curve handles. Perhaps that concept is familiar from a tool like the Pen tool in Adobe Illustrator:
     
The SVG `path` Syntax: An Illustrated Guide-1 (computers,describe,anything,elements,ultimate)
    The last of the three points is the end of the curve. The point where the curve should finish up. Here's an illustration:
   The lowercase c command is exactly the same, except all three points use relative values.
   The S (or s ) command is buddies with the C commands in that it only requires two points because it assumes that the first bezier point is a reflection of the last bezier point from the last S or C command.
   The Q command is one of the easier ones as it only requires two points. The bezier point it wants is a "Quadratic" curve control point. It's as if both the starting and ending point share a single point for where their control handle end.
   We might as well cover T at the same time. It's buddies with Q just like S is with C . When T comes after a Q, the control point is assumed to be a reflection of the previous one, so you only need to provide the final point.
   The A command (no lowercase version) is probably the most complicated. Or the require the most data, at least. You give it information defining an oval's width, height, and how that oval is rotated, along with the end point. Then a bit more information about which path along that oval you expect the path to take. From MDN :
  there are two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at negative angles or positive ones, which essentially picks which of the two circles you will travel around.
   Joni Trythall's graphic explaining A from her article on SVG paths is pretty clear:

The SVG `path` Syntax: An Illustrated Guide-2 (computers,describe,anything,elements,ultimate)
    Here's written explanations of those curve commands.
               C cX1,cY1 cX2,cY2 eX,eY       Draw a bezier curve based on two bezier control points and end at specified coordinates               c      Same with all relative values              S cX2,cY2 eX,eY      Basically a C command that assumes the first bezier control point is a reflection of the last bezier point used in the previous S or C command              s      Same with all relative values              Q cX,cY eX,eY       Draw a bezier curve based a single bezier control point and end at specified coordinates               q      Same with all relative values              T eX,eY      Basically a Q command that assumes the first bezier control point is a reflection of the last bezier point used in the previous Q or T command              t      Same with all relative values              A rX,rY rotation, arc, sweep, eX,eY      Draw an arc that is based on the curve an oval makes. First define the width and height of the oval. Then the rotation of the oval. Along with the end point, this makes two possible ovals. So the arc and sweep are either 0 or 1 and determine which oval and which path it will take.           Wanna see a bunch of examples? OK:
   See the Pen Simple Path Examples by Chris Coyier ( @chriscoyier ) on CodePen .
  If you're looking in a recently-released Blink-based browser and you have a mouse, you'll see some hover animations! Turns out you can set path data right in CSS now. For example...
  [code]
  
[/code]  [code]svg:hover path {
  transition: d 0.2s;
  d: path("M2,5 C2,2 8,2 8,5");
}[/code]   Wanna know more about SVG? It's seriously cool I promise. I wrote a whole book on it. It's called Practical SVG and it's not very expensive.
友荐云推荐




上一篇:WalmartLabs open sources the application platform that powers Walmart.com
下一篇:Writing a macOS Filesystem – A Base Project
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

刘佳凤 发表于 2016-10-4 07:02:59
男人,再优秀,没女人也生不下孩子。说明:”合作很重要!”
回复 支持 反对

使用道具 举报

网味 发表于 2016-10-5 18:20:09
走过,路过,千万不要错过,顶一下!
回复 支持 反对

使用道具 举报

艾静静 发表于 2016-10-20 05:05:42
运气就是机会碰巧撞到了你的努力。
回复 支持 反对

使用道具 举报

恋尔佳依旗舰店 发表于 2016-10-20 14:47:47
楼主你好。。新人。混眼熟。顺便骗点经验。到手~拍拍屁股走人~
回复 支持 反对

使用道具 举报

我的黑色主题 发表于 2016-10-21 14:14:17
女人能输不能哭 顶起!
回复 支持 反对

使用道具 举报

dddd 发表于 2016-10-21 21:08:59
顶贴不认真,大脑有问题。
回复 支持 反对

使用道具 举报

潇洒是是 发表于 2016-10-25 21:14:29
佩服佩服!
回复 支持 反对

使用道具 举报

anyword 发表于 2016-11-3 19:23:45
世界那么大,我想去看看
回复 支持 反对

使用道具 举报

明日边缘 发表于 2016-11-6 08:21:32
钻石恒久远,一颗就破产.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表