45 lines
1.4 KiB
Markdown
45 lines
1.4 KiB
Markdown
|
---
|
||
|
|
title: Using attributes
|
||
|
|
for: developers
|
||
|
|
about: Show s you have to use attributes on points, paths, and snippets
|
||
|
|
---
|
||
|
|
|
||
|
|
Points, Paths, and Snippets all have [attributes](/reference/api/attributes/) that you can use to
|
||
|
|
influence how they behave.
|
||
|
|
|
||
|
|
A common scenario is to apply CSS classes to style a path:
|
||
|
|
|
||
|
|
```js
|
||
|
|
paths.example.attributes.add('class', 'lining dashed');
|
||
|
|
```
|
||
|
|
|
||
|
|
Because it's so common to set attributes, Points, Paths and Snippets all have
|
||
|
|
the `attr()` helper method.
|
||
|
|
|
||
|
|
Not only is less more, the method is also *chainable*, which allows you to do this:
|
||
|
|
|
||
|
|
```js
|
||
|
|
points.message = new Point(0,0)
|
||
|
|
.attr("data-text", "Hello world!")
|
||
|
|
.attr("data-text-class", "note");
|
||
|
|
```
|
||
|
|
|
||
|
|
<Note>
|
||
|
|
|
||
|
|
In this example, we're using attributes to add text to our pattern.
|
||
|
|
The [adding-text](/concepts/adding-text) documentation explains this in detail.
|
||
|
|
|
||
|
|
</Note>
|
||
|
|
|
||
|
|
<Tip>
|
||
|
|
|
||
|
|
When rendering, FreeSewing will output all your attributes. This gives you the
|
||
|
|
possiblity to use any valid attribute to control the appearance.
|
||
|
|
|
||
|
|
This is also why we use the *data-* prefix for those attributes that have
|
||
|
|
special meaning within FreeSewing, such as `data-text`. Adding a `text` attribute
|
||
|
|
would result in invalid SVG as there is no such thing as a text attribute. But `data-text`
|
||
|
|
is fine because the `data-` prefix indicates it is a [custom attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*).
|
||
|
|
|
||
|
|
</Tip>
|