Adding a new SVG node to diagram corrupts an existing SVG node

[Mithun]

Hello Syncfusion Team,

I'm using the latest version of diagram component in my app:"@syncfusion/ej2-angular-diagrams": "^17.3.34",

I notice that sometimes, adding a new SVG node to the diagram corrupts an earlier, existing SVG node.

I have prepared a stackblitz demo for this:

1: Here is the original node (notice the color):https://stackblitz.com/edit/unexpected-color-change-part1

2: Here is what the original node looks like after I add a new SVG node to canvas:https://stackblitz.com/edit/unexpected-color-change-part2

Could this be because both SVGs are using the same CSS class names (.st0, .st1 etc).

Please let me know if any additional logs/details are needed from my end to investigate this.

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

Yes, the problem is defining same class name for multiple SVG content. The node style is overriding with the other node. We have changed the class name in the SVG content and provided a modified sample below. 

Sample: https://stackblitz.com/edit/unexpected-color-change-part2-ngplww?file=src%2Fapp%2Fapp.component.ts 

Regards, 

Shyam G 

[Mithun]

Thanks Shyam for confirming!

We were planning to use a file picker/uploader to allow users to upload their own SVG files onto the diagram component. 

However this name collision issue with CSS classes seems problematic in that regard. 

Any ideas?

Our app may have to restrict the custom uploads to SVGs or JPEGs only since we cannot control (or easily manipulate) the contents of arbitrary SVG files.

Thanks,

Mithun 

[Shyam G]

Hi Mithun, 

We should define a different class name for each SVG content and it is mandatory. If not, the style will be overridden for each SVG content by default. 

Regards, 

Shyam G 

[Mithun]

Thanks Shyam!

[Shyam G]

Hi Mithun, 

Thanks for your update. 

Regards, 

Shyam G 

[Arunkumar Manoharan]

Hi Ali,

 

On further analysis, we have checked adding new a SVG from the palette and expanding and collapsing but we couldn’t be able to replicate the issue on our end. we have created a sample with SVG node and pallets kindly replicate your issue in the attached sample so that we could be able to serve you better. For more information, please refer to the sample link. 

Note: 

We should define a different class name for each SVG content, and it is mandatory. If not, the style will be overridden for each SVG content by default.  

 

 

 

Sample Link: https://stackblitz.com/edit/b3ofjt-9xwwvp?file=index.ts 

 

Regards,  

Arun. 

[Aravind Ravi]

Hi Ali, 

Thanks for the update 

Regards 

Aravind Ravi 

[Mithun]

Actually, I'm observing this as well (please see attached gif file and svg file).

This seems to happen whenever there is a 'gradientTransform', 'linearGradient' or 'gradientUnits' in the svg (native) node.

Attachment: kotlin_9a9b65c8.zip

[Aravind Ravi]

Hi Mithun, 

Could you please confirm us whether you set the linear and radial gradient for the native node using node’s style properties or you have set the gradient using the CSS. As we said earlier, We should define a different class name for each SVG content, and it is mandatory. If not, the style will be overridden for each SVG content by default. So please share us how do you apply, gradient for the node. 

Regards 

Aravind Ravi 

[Mithun]

Hi Aravind,

The linear gradient IDs are defined in the native node's SVG files (please see attached kotlin.svg file). The IDs are unique (I've double-checked my codebase). Also, I'm not using any class names in SVG files.

In my code base, other than SVG files, I don't set linear/radial gradients anywhere else: not via node's style properties or nor via CSS.

However, I think, because, the same SVG file is loaded both in the palette and in the diagram, the IDs in the SVG files are somehow colliding.

I've attached the diagram json + SVG file.

Thanks,

-Mithun

Attachment: diagrampaletteissue_85150ebb.zip

[Sivakumar Sekar]

Hi Mithun, 

 

We are validating your requirements and update you with more details on December 23^rd, 2021. 

 

Regards,  

Sivakumar    

[Sivakumar Sekar]

Hi Mithun,

On further analysis of the shared sample. We found that the SVG child elements (Linear gradient)added into the symbol palette and diagram contain the same ID. By default, we will render the provided SVG shape content directly, without any changes. While collapsing the palette its contents display property is assigned to none. Since the diagram and symbol palette, SVG nodes gradient element has also the same IDs. We suggest you use the unique ids for the SVG shapes inside the diagram. Using the diagram drop event(Triggered when a symbol is dropped into the diagram), we can able to modify the dropped node content as shown in the below code.

public drop(args: IDropEventArgs) {

if (args.source instanceof SymbolPaletteComponent &&(args.element as Node).id.includes("newshape")) {

(args.element as Node).shape = { type: 'Native', content: newTemplate};

}

}

Please refer to the below sample and video link for more information.

Sample link: https://stackblitz.com/edit/angular-gawthf-zyckde?file=app.component.ts

Video link: https://www.syncfusion.com/downloads/support/forum/149969/ze/F149969-832695936

Regards,

Sivakumar