ab3204f9f1
The replaces the NextJS site powering FreeSewing.dev with a Docusaurus setup. It's part of my efforts to simplify FreeSewing's setup so we can focus on our core value proposition.
54 lines
1.4 KiB
Text
54 lines
1.4 KiB
Text
---
|
|
title: 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
|
|
|
|
```js
|
|
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`](/reference/api/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`](/reference/api/point) on which to anchor the snippet
|
|
- `attributes` : An [`Attributes`](/reference/api/attributes) instance holding the snippet's attributes
|
|
|
|
:::note RELATED
|
|
See [Using Attributes](/howtos/code/attributes)
|
|
for information about custom Attributes that can be used with Snippets.
|
|
:::
|
|
|
|
## 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 />
|