freesewing/markdown/dev/howtos/code/attributes/en.md

title
Using attributes

Points, Paths, and Snippets all have attributes that you can use to influence how they behave.

Under the hood, text, css classes, and even circles are all set in attributes. There are plenty of higher-level helper methods available, but knowing how to manipulate attributes is useful in case you want to accomplish something for which there is no higher-level helper method.

Let's use an example to see the different ways we can assign a css class:

```mjs ({ points, Point, paths, Path, part }) => { /* * Via the high-level Point.addText method */ points.a = new Point(0,0) .addText('I am bold and colorful', 'bold fill-note')

/*

• Via the lower-level Point.attr method */ points.b = new Point(0,10) .attr('data-text', 'I am bold and colorful') .attr('data-text-class', 'bold fill-lining')

/*

• Via low-level access to the attributes property */ points.c = new Point(0,20) points.c.attributes.add('data-text', 'I am bold and colorful') points.c.attributes.add('data-text-class', 'bold fill-contrast')

// Prevent clipping paths.diag = new Path() .move(new Point(-10,-5)) .move(new Point(80,25))

return part }

</Example>

kEven though there are helpers methods available for them.

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:

points.message = new Point(0,0)
  .attr("data-text", "Hello world!")
  .attr("data-text-class", "note");

In this example, we're using attributes to add text to our pattern. The adding-text documentation explains this in detail.

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.