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

SVG with interpolation doesn't render in browser #638

Open
deotimedev opened this issue Oct 11, 2023 · 2 comments
Open

SVG with interpolation doesn't render in browser #638

deotimedev opened this issue Oct 11, 2023 · 2 comments
Labels
A-svg Area: SVG support C-bug Category: bug, something isn't working S-actionable Actionable

Comments

@deotimedev
Copy link

deotimedev commented Oct 11, 2023

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Run code:

use sycamore::prelude::*;

#[component]
fn Test<T: Html>() -> View<T> {
    view! {
        svg(width="100", height="100") {
            rect(width="100%", height="100%", fill="blue")
            (view! { rect(width="50%", height="50%", fill="red") })
        }
    }
}

fn main() {
    sycamore::render(Test);
}

Expected behavior
Interpolated to render the same as non-interpolated
image

Environment

  • Sycamore: 0.9.0-beta.1
  • Browser: Chrome
  • OS: Windows

Additional context
Interpolated and non-interpolated SVG results in identical DOM, so it seems strange that it does not show on screen

@lukechu10
Copy link
Collaborator

I'm guessing that this has something to do with the element namespace in which it was created, although why that is happening I have no idea. Normally, rect and other SVG tags should always be created inside the SVG namespace.

@lukechu10 lukechu10 added C-bug Category: bug, something isn't working good first issue Good for newcomers A-svg Area: SVG support S-actionable Actionable labels Oct 11, 2023
@brynnjmccormick
Copy link
Contributor

I believe @lukechu10 is correct, it does have to do with a lack of svg namespace. The problem comes from the implementation of instantiate_template for DomNode. By rendering to an HTML string and caching it, we lose the namespace. If you remove DomNode's implementation of instantiate_template and use the generic implementation, this bug does not occur.

@lukechu10 lukechu10 removed the good first issue Good for newcomers label Sep 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-svg Area: SVG support C-bug Category: bug, something isn't working S-actionable Actionable
Projects
None yet
Development

No branches or pull requests

3 participants