DiagramComponent's nodeDefaults for SVG/NativeModel ignored in firefox

Mithun

Asked On October 24, 2019 10:09 AM UTC

Hello SyncFusion Team,

I'm using the @syncfusion/ej2-angular-diagrams control in my Angular app.

I'm using [nodeDefaults] to ensure that my loaded SVG/NativeModel nodes have a 50px x 50px size.

This works fine on chrome, edge etc. However firefox seems to ignore [nodeDefaults].

Is this a known issue? Any workarounds?

PS: I have set up a stackblitz repro: https://stackblitz.com/edit/diagram-firefox. You can launch it in chrome & firefox to see the difference.

	chrome	firefox

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On October 25, 2019 06:56 AM UTC

Hi Mithun,

We have modified your sample by removing SVG tag in the sample to resolve your issue.

Sample: https://stackblitz.com/edit/diagram-firefox-ybnkkr?file=src/app/app.component.ts

Regards,

Shyam G

Reply | Reply with quote

Mithun

Replied On October 27, 2019 01:25 AM UTC

Thank you.

Is there a recommended linter/validator for SVG files? Preferably something that be run on the command line (i.e. part of the build process).

Thanks,

Mithun

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On October 28, 2019 09:50 AM UTC

Hi Mithun,

You do not need the SVG linter / validator to validate your SVG. The SVG tag can be removed in your SVG alone. If you are facing any problems in SVG, you can share them with us so we can solve them. Also, please refer to the reference below if you need to validate the SVG.

Link: https://validator.w3.org/#validate_by_input

Regards,

Shyam G

Reply | Reply with quote

Mithun

Replied On October 31, 2019 02:05 PM UTC

So removal of the <svg> tags poses another problem for us.

The same SVG file is being loaded elsewhere in our app using <img src="path to svg file"> (which uses content-type: image/svg+xml). This stops working if we remove the <svg> tags.

Directly embedding the SVG inline in HTML is also not an option for us (long story: the SVG content becomes available to the app long after the page has been rendered).

Any suggested workarounds?

We'd like to reuse the same SVGs in both scenarios:

on the diagram control (as NativeModel)
in <img src=""> tags.

Thanks,

Mithun

Reply | Reply with quote

Mithun

Replied On October 31, 2019 03:29 PM UTC

ok. I have a 'non-ideal' workaround for this issue.

I'm now using the <svg> inline in html, by using the [innerHTML] property. I'm however forced to bypass Angular's HTML sanitization and security context by using DOMSanitizer module as follows:

Hoping that there is a better workaround for this.

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 4, 2019 07:32 AM UTC

Hi Mithun,

We have created a sample in which we have provided method(removeSvgTag) to remove SVG tag. So, you can use this method only when you are rendering our native node. Please refer to a code example and modified sample below.

Code example:

public removeSvgTag(str)

{

if ((str===null) || (str===''))

return '';

else

str = str.toString();

return str.replace(/(<svg|<\svg>)([^<]*|[^>]*)/g, '<g>');

}

Sample: https://stackblitz.com/edit/diagram-firefox-hatdzk?file=src/app/app.component.ts

Regards,

Shyam G

Reply | Reply with quote

Mithun

Replied On November 5, 2019 01:50 PM UTC

Thanks. This looks like a good solution. Trying it out now.

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 6, 2019 04:21 AM UTC

HI Mithun,

Thanks for your update.

Regards,

Shyam G

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148545	Oct 24,2019 10:06 AM UTC	Nov 6,2019 04:21 AM UTC	Angular - EJ 2	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US