link.attr(attrs)

Set SVG attributes on subelements. This is a method analogous to attr method of Joint.dia.Element. The keys of the attrs object are CSS selectors matching the SVG element the link consists of. The values are objects containing SVG attributes and their values. attrs object will be mixined with attrs property of the link model. This is a convenient way of rewriting only some of the attributes of the SVG elements. For overwritting all attributes of all SVG elements, use link.set('attrs', attrs). Here it is important to mention how the markup of a link looks like:

<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />

As you can see, the link consists of a couple of SVG path elements and couple of SVG group elements:

• .connection is the actual line of the link.
• .connection-wrap is an SVG path element that covers the .connection element and is usually thicker so that the link is able to handle pointer events (mousedown, mousemove, mouseup) that didn't target the thin .connection path exactly. This makes it easy to "grab" the link even though the mouse cursor didn't point exactly at the (usually thin) .connection path element.
• .marker-source and .marker-target are the arrowheads of the link.

link.attr({
    '.connection': { stroke: 'blue' },
    '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
    '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' }
});

An alternative call using a string path and a value:

link.attr('.marker-source/fill', 'green');