SVG——新一代Web设计及互动媒体的革新
首页 支持与服务 SVG教程 SVG编辑器软件:Inkscape高级教程 - SVG路径编辑与子路径及子路径的结合

SVG编辑器软件:Inkscape高级教程 - SVG路径编辑与子路径及子路径的结合

文章首页
SVG编辑器软件:Inkscape高级教程
SVG路径编辑与子路径及子路径的结合
SVG转换路径与布尔操作
SVG简化优化与创建SVG文本

3 SVG路径编辑

  形状工具创建的是形状,而钢笔和铅笔工具创建的是路径。路径由直线和Bezier曲线构成,像其他对象一样,路径也可以设置任意类型的填充和轮廓属性。但与形状不同的是,修改路径时可以随意调整节点和(直线或曲线)段,而不是预先设置好的控制柄。切换到节点工具(F2),然后选择下面的路径:



You will see a number of gray square nodes on the path. These nodes can be selected by click, Shift+click, or by dragging a rubberband - exactly like objects are selected by the Selector tool. You can also click a path segment to automatically select the adjacent nodes. Selected nodes become highlighted and show their node handles - one or two small circles connected to each selected node by straight lines. The ! key inverts node selection in the current subpath(s) (i.e. subpaths with at least one selected node); Alt+! inverts in the entire path.

  路径的编辑通过拖动节点、节点控制柄、或路径段来进行。请在上面的路径上练习一下。Ctrl仍然有限制移动和旋转的作用。光标arrow 键, Tab, [, ], <, >的作用与选择工具中一样,但作用于节点,而不是整个绘图对象。在路径上的任意位置双击或Ctrl+Alt+Click可以添加节点。

  选中节点后按Del ,或者Ctrl+Alt+单击一个节点,可以将其删去。删除节点时,将尽可能保持路径的形状,如果要保持相邻的节点不变(形状将发生变化),用Ctrl+Del删除。另外,Shift+D可以再制选中的节点,Shift+B可以将路径在选中的节点处打开,如果选中的是路径的两个终点,则可以将其结合在一起。

  Shift+C可以使节点尖锐Cusp ,它的两个控制柄独立,可以各自调整角度;Shift+S可以使节点平滑smooth ,两个控制柄共线;Shift+Y可以让节点对称symmetric ,两个控制柄共线并且等长。改变节点的类型时,将鼠标悬停在一个控制柄上,可以保持该控制柄不变,仅另一个控制柄相应地改变。

  通过Ctrl+click控制柄,可以将节点的控制柄收回(到节点上),如果相邻两个节点的控制柄都被收回,它们中间将变为直线。在节点上Shift+drag可以将控制柄重新拉出。

4 子路径和结合

  一个路径可以包含数个子路径subpath。每个子路径中的节点互相连接,子路径与子路径之间则是断开的。左下图,三个子路径组合为一个路径,右下图中则互相独立,各自为一个路径:



  要注意的是,复合路径并不等同于群组,它是一个单独的对象。如果你选中左上的对象,然后切换到节点工具,将会看到,三个子路径上的节点都显现出来,而在右侧,每次只能选中一个路径进行节点编辑。

  通过对几个路径进行结合Combine可以形成一个复合路径(Ctrl+K),也可以将一个复合路径分解为几个独立的路径 (Shift+Ctrl+K)。在上图中练习一下。由于一个对象只能有一种填充和轮廓样式,结合后的复合路径将继承第一个对象(处于叠放次序的底层)的属性。

  在合并有填充的路径时,如果路径之间有重叠区域,合并后,重叠部分的填充将消失:



  这是创建内部有孔的形状的最简单的方法。路径工具的高级操作请参考下面的“布尔操作”。