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.

Example

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

I am bold and colorful I am bold and colorful I am bold and colorful

So, attributes can be set via low-level access even though there are helpers methods available for them.

Common scenarios

A common scenario is to apply CSS classes to style a path:

Javascript
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:

Javascript
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 documentation explains this in detail.

Custom attributes

There are some custom attributes that FreeSewing uses to modify the appearance of Points, Paths, and Snippets.

Points

The custom attributes that can be added to Points:

AttributeDescription
data-textText to display at the point
data-text-classCSS classes to apply to the text to provide styling
data-text-lineheightLine height for the text, in mm
data-circleRadius of the circle to display at the point
data-circle-classCSS classes to apply to the circle to provide styling
RELATED

See Drawing circles for more information and other ways to draw circles.

See Adding text for other ways to add text to points.

Paths

The custom attributes that can be added to Paths:

AttributeDescription
data-textText to display along the path
data-text-classCSS classes to apply to the text to provide styling
RELATED

See Adding text for other ways to add text to paths.

Snippets

The custom attributes that can be added to Snippets:

AttributeDescription
data-rotateNumber of degrees to rotate the snippet
data-scaleScaling factor to apply to the snippet. Either a single number or an array of 2 numbers for separate X and Y scaling factors
TIP

When rendering an SVG document, FreeSewing will output all your attributes. This gives you the possibility to use any valid SVG 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.

Storing the seam length to use in another partUsing macros