--- description: Change the stacking order (z-index) of SVG elements --- # Layer Order Changes the rendering order of SVG elements. In SVG, elements later in the document render on top of earlier elements. ## Usage ```bash node .claude\/skills\/layer-order\/index.js ``` ## Selectors Must include an index: | Selector | Target | |----------|--------| | `path:0` | First path | | `circle:1` | Second circle | | `rect:-1` | Last rectangle | ## Actions | Action | Description | |--------|-------------| | `front` | Bring to front (renders on top of everything) | | `back` | Send to back (renders just after background) | | `up` | Move up one layer | | `down` | Move down one layer | ## Examples ### Bring to Front ```bash # Bring first circle to front node .claude\/skills\/layer-order\/index.js output\/art.svg circle:0 front ``` ### Send to Back ```bash # Send last path behind other elements node .claude\/skills\/layer-order\/index.js output\/art.svg path:-1 back ``` ### Move Up\/Down ```bash # Move element up one layer node .claude\/skills\/layer-order\/index.js output\/art.svg rect:0 up # Move element down one layer node .claude\/skills\/layer-order\/index.js output\/art.svg circle:1 down ``` ## How SVG Layering Works SVG uses "painter's model" - elements are painted in document order: ``` First in document → Renders at back (covered by later elements) Last in document → Renders at front (covers earlier elements) ``` ```xml