Is it possible to apply an svg filter to a node that I drag from the palette

Question

Hi there,

I'd like to apply an SVG filter programatically. Is this possible in the syncfusion diagram? I can set it manually on the element using devtools (as per the below screenshot). But I can't figure out how to set it programatically.

This example is for a basic rectangle

Geoff · Answer

For example, is it possible to set a class I can reference.  This works if I get the svg rect by its ID #nodeID_content{    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7))}

I just can't figure out how to apply it to all my nodes

Aravind Ravi · Answer

Hi Geoff,By default, in the diagram, we have support to change the
node fill color, stroke, stroke-width, and dash array and be able to apply shadow for
the nodes. We do not have SVG filter support for the node. As mentioned, you can
get the node element from DOM and in style, you can apply a filter for the DOM
element.RegardsAravind Ravi

Geoff · Answer

Thanks Aravind,It would be amazing if we could set a class on the SVG when we create a node of type 'Path'.  And then we could set the filter for multiple nodes at once based on what we want to do.  Is there any way to achieve this?  Or is it something that could be a feature request?

Aravind Ravi · Answer

Hi Geoff,We will validate and update you with more information on
June 14th 2022.RegardsAravind Ravi

Geoff · Answer

Hi Arvind, just checking in.At the moment I am using pattern matching in the node id, but it would be a lot less clunky with a class.            [id^="sticky_"][id$="_content"]{                filter: drop-shadow(0 var(--shadow-offset-y) 0.5em  rgba(0, 0, 0, 0.3));            }

Aravind Ravi · Answer

Hi Geoff,By default, in the diagram, we do not have provide class
name for the node element. Because in the diagram we have rendered different
types of node, so that only we do not provide class name for the node element. If
you add node at runtime in the diagram means then collectionChange event gets
fired. In that event through element argument you can get the node that is
added in the diagram. By using that node
we can able to get the node element from DOM using its ID and change its appearance.
Please refer below code snippet for how to use collectionChange event

function collectionChange(args:
  ICollectionChangeEventArgs) {
      if (args.type
  === 'Addition' && args.state === 'Changed') {
          let node:
  NodeModel = args.element as NodeModel;
          let element
  = document.getElementById(node.id + "_content");
      }
  }

RegardsAravind Ravi