Parsing SVG into array of nodes

[tippington]

Hello! First off, thanks for the library, I've gotten the basic functionality working without any issue.

I've got a particular use-case that I'm looking for help on: I need to display an SVG and allow the user to tap different paths within that SVG. I need to have the app recognize which path was selected and exhibit different behavior based on which path was selected.

To do this, it would appear that I would need to parse the SVG string into an array of nodes, rather than a single node.

Each selectable path has a unique "id" value, as well as other attribute values that I'd like to be able to read from the path.

So, my questions are:

• How can I parse a single SVG into an array of nodes (one for each path)?
• How can I detect which path was selected (presumably in the onTap method, but let me know if there's a better way)?
• How can I extract attribute values from the selected path?

Thanks in advance for your help!

[ystrot]

Hi @tippington,

Here is code samples you can use:

func addTaps(to node: Node) {
    if let group = node as? Group {
        // iterate over node tree
        group.contents.forEach { addTaps(to: $0) }
    } else if let shape = node as? Shape {
        if let path = shape.form as? Path {
            // add tap handler for all paths
            shape.onTap { e in
                // use shape.tag to access id/class from your SVG
                // use path and shape to access all other attributes
            }
        }
    }
}

[tippington]

Hello @ystrot , thanks so much for the code example! It's very helpful to know that I can access the entire node tree within a Node by simply casting it as a Group. I have a couple questions about the second part, though.

Unfortunately, when I tap a Node with a defined id attribute, logging out shape.tag prints []. Is there anything else I need to do to ensure that shape.tag will give me the proper id attribute of the Node?

Also, could you elaborate on this comment:

// use path and shape to access all other attributes

I don't see any property of path that seems like it would contain any attribute information from the SVG. How exactly can I get attributes from the shape and path?

Thanks in advance for your help.

[tippington]

Hey @ystrot , just circling back on this as I'm still struggling with it. Let me know if there are any answers to my above questions, thanks!

[ystrot]

Hey @tippington , it would be easier to help if you can provide your SVG file and share your exact use case (like which SVG node you're trying to access, which attributes you need, etc.)

[tippington]

Hey @ystrot , thanks for the quick response! Here's a sample SVG file, although the app will need to work with others. They should all be formatted like this one: response.svg.zip

We'll need to find and access all nodes with section in their class name. Then, we'll need to access the id, data-section-key, and data-standing attributes, if they are present.

[tippington]

Hey @ystrot, did you have a chance to check the SVG I attached?

[tippington]

Hey @ystrot, just checking back on this. It'd really improve our app if we were able to get this working. Would really appreciate your help!