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');