Is there a way to give a link two colors

[reshin-pulapaddy]

Introduction

Is there a way to give a link two colors

Example
The first half of the link should be red, and the second half should be blue

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

It's possible when you define a custom stroke-dasharray attribute as shown in this example.

Note that the definition of custom attributes has not yet been officially published and documented

[reshin-pulapaddy]

Can that be dynamically done?

Example 1
Clicking the "link tools" button splits the link and applies distinct colors based on the number of clicks. For instance, if the button is clicked three times, the link will be divided into three segments, each assigned a different color.

Example 2

Can the color be modified between specific points within a given link?

[kumilingus]

I wish you'd tell us this when you asked the question (it would'd save us some time).

• it's not 2 colors, it's any number of colors.
• the link is not divided in half, but at any point.

In this case, I believe it would be easier to split the link into multiple links and connect them with 1x1 sized elements.

// click on link to divide it
--Red-->

// click on red to divide it
--Red-->o--Blue-->

// click on blue to divide it
--Red-->o--Green-->o--Blue-->

paper.on('link:pointerclick', (linkView, evt, x, y) => {
   // - add new element at x,y
   // - add new link starting at `linkView` source
   // - reconnect the `linkView` source to new element
   // - reconnect the new link target to the new element
});

[reshin-pulapaddy]

Thank you @kumilingus, It is working