Snippet

A Snippet is a reusable bit of markup for your pattern. Snippets are added to the SVG defs section, and rendered with the SVG use tag.

Signature

Snippet new Snippet(String def, Point anchor);

The snippet constructor takes two arguments:

• def : The xlink:href id that links to the relevant entry in the SVG defs section. This is also the common name of the snippet (logo, notch, button, etc.)
• anchor : A Point on which to anchor the snippet

Properties

A Snippet object comes with the following properties:

• def : The xlink:href id that links to the relevant entry in the SVG defs section
• anchor : A Point on which to anchor the snippet
• attributes : An Attributes instance holding the snippet's attributes

RELATED

See Using Attributes for information about custom Attributes that can be used with Snippets.

Example

Preview

Code

({ Point, Snippet, snippets, Path, paths, part }) => {

  snippets.logo = new Snippet('logo', new Point(0,0))

  // Prevent clipping
  paths.diag = new Path()
    .move(new Point(-25,-40))
    .move(new Point(25,15))

  return part
}

X-Ray

Example of the Snippet constructor

Methods

A Snippet object exposes the following methods:

• Snippet.asRenderProps()
• Snippet.attr()
• Snippet.clone()
• Snippet.rotate()
• Snippet.scale()