java svgshape_SVG (一) 图形, 路径, 变换总结; 以及椭圆弧线, 贝塞尔曲线的详细解释...

近期工作中要处理很多 SVG 图片, 所以从零开始学习了 SVG 的相关内容.

我看的是这本书 SVG Essentials, 2nd Edition,以及它的中译版 SVG精髓(第2版).

这本书深入浅出, 例子很多, 非常不错. 因为 svg 涉及到很多关于颜色的内容, 所以还是建议大家看电子版.

工作中的任务是实现一个相框功能, 当中涉及到了诸如 use, image, clip-path 的内容, 学习了一段时间后总算解决了, 所以希望记录一下学习内容和解决方案.

内容比较多, 所以准备开一个系列, 这是 SVG 系列的第一篇, 基础知识总结. 后续将会有更多关于 SVG 的内容. 敬请期待!

SVG basics

Shape Reference Summary

形状

描述

直线: 起点(start-x, start-y) 终点(end-x, end-y);

矩形: 左上角(left-x, top-y), 宽高 width, height

圆: 圆心(center-x, center-y) 半径 r

椭圆: 圆心(center-x, center-y) xy轴半径 rx, ry

多边形: 由一系列坐标组成, points-list: x1 y1 x2 y2 x3 y3 ....

折线: 由一系列坐标组成, points-list: x1 y1 x2 y2 x3 y3 ....

Path Reference Summary

本质上, 上述基本形状都是路径(path)的简写. 简写可以使得 svg 文档更具有可读性. 但是当碰到复杂路径时, 就需要 path 来描述. 以下总结中, 凡是出现大写字母表示后续坐标为绝对坐标, 凡是小写字母都代表相对于上一个坐标的相对位移. Z 同 z 无差别. 因为表示闭合, 其后不用跟坐标

command

描述

M(m) x