Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parsing SVG into array of nodes #756

Open
tippington opened this issue Apr 28, 2021 · 7 comments
Open

Parsing SVG into array of nodes #756

tippington opened this issue Apr 28, 2021 · 7 comments

Comments

@tippington
Copy link

tippington commented Apr 28, 2021

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
Copy link
Member

ystrot commented Apr 30, 2021

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
Copy link
Author

tippington commented Apr 30, 2021

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
Copy link
Author

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
Copy link
Member

ystrot commented May 26, 2021

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
Copy link
Author

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
Copy link
Author

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

@tippington
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants