49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
---
|
|
title: Snippet
|
|
---
|
|
|
|
A Snippet is a reuseable bit of markup for your pattern. They are added to the
|
|
SVG `defs` section, and rendered with the SVG `use` tag.
|
|
|
|
## Signature
|
|
|
|
```js
|
|
Snippet new Snippet(def, Point);
|
|
```
|
|
|
|
The snippet constructor takes two arguments:
|
|
|
|
- `def` : The `xlink:href` id that links to the relevant entry in the SVG `defs` section
|
|
- `anchor` : A [`Point`](/reference/api/point) on which to anchor the snippet
|
|
|
|
## Attributes
|
|
|
|
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`](/reference/api/point) on which to anchor the snippet
|
|
- `attributes` : An [`Attributes`](/reference/api/attributes) instance holding the snippet's attributes
|
|
|
|
## Example
|
|
|
|
<Example caption="Example of the Snippet constructor">
|
|
```js
|
|
({ 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
|
|
}
|
|
```
|
|
</Example>
|
|
|
|
## Methods
|
|
|
|
A Snippet object exposes the following methods:
|
|
|
|
<ReadMore list />
|