We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

14 Replies

SG Shyam G Syncfusion Team December 17, 2019 12:36 AM

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. 


Regards, 
Shyam G 



MI Mithun December 17, 2019 02:53 AM

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 


SG Shyam G Syncfusion Team December 18, 2019 12:53 AM

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 



MI Mithun December 18, 2019 02:20 AM

Thanks Shyam!


SG Shyam G Syncfusion Team December 18, 2019 02:25 AM

Hi Mithun, 
Thanks for your update. 
Regards, 
Shyam G 



AM Ali Mirzaie December 7, 2021 06:45 AM

hi

first of all thanks for your great effort.

I'm adding new a SVG  from palette and when I'm closing expanded , SVG will lost classes and styles



AM Arunkumar Manoharan Syncfusion Team December 8, 2021 06:24 AM

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.  
 
 
 
 
Regards,  
Arun. 



AM Ali Mirzaie December 12, 2021 02:20 AM

thanks for answer

regards,

Ali



AR Aravind Ravi Syncfusion Team December 13, 2021 08:11 AM

Hi Ali, 

Thanks for the update 

Regards 
Aravind Ravi 



MI Mithun December 16, 2021 04:53 AM

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



AR Aravind Ravi Syncfusion Team December 19, 2021 10:32 PM

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 



MI Mithun December 20, 2021 01:04 AM

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



SS Sivakumar Sekar Syncfusion Team December 21, 2021 10:37 AM

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




SS Sivakumar Sekar Syncfusion Team December 28, 2021 10:33 AM

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.

Regards,
Sivakumar




Loader.
Live Chat Icon For mobile
Up arrow icon