b34a2ee2ed
This is a flat (without history) import of (some of) the content from our markdown module. We've imported this without history because the repo contains our blog posts and showcases posts content prior to porting them to strapi. Since this contains many images, it would balloon the size of this repo to import the full history. Instead, please refer to the history of the (archived) markdown repo at: https://github.com/freesewing/markdown
2 KiB
2 KiB
| 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.
The snippet constructor takes two arguments:
def: Thexlink:hrefid that links to the relevant entry in the SVGdefssectionanchor: APointon which to anchor the snippet
Snippet new Snippet(def, Point);
A Snippet object comes with the following properties:
def: Thexlink:hrefid that links to the relevant entry in the SVGdefssectionanchor: APointon which to anchor the snippetattributes: AnAttributesinstance holding the snippet's attributes
In addition, a Snippet object exposes the following methods:
attr()
Snippet snippet.attr(
string name,
mixed value,
bool overwrite = false
)
This Snippet.attr() method calls Attributes.add() under the hood, but returns the Snippet object. This allows you to chain different calls together.
If the third parameter is set to true it will call Attributes.set() instead, thereby overwriting the value of the attribute.
Snippet.attr() example
let { Point, points, Snippet, snippets } = part.shorthand();
points.anchor = new Point(50, 15);
snippets.demo = new Snippet("logo", points.anchor)
.attr("data-scale", 0.8)
.attr("data-rotate", 180);
clone()
Snippet snippet.clone()
Snippet.clone() example
Returns a new Snippets object that is a deep copy of this one.
let { Point, points, Snippet, snippets } = part.shorthand();
points.anchor = new Point(35, 35);
snippets.demo = new Snippet("logo", points.anchor)
.attr("style", "color: #f006");
snippets.clone = snippets.demo
.clone()
.attr("data-scale", 0.5);