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

VRaw namespace support for svg contents. #3641

Closed
finnbear opened this issue Mar 23, 2024 Discussed in #3639 · 0 comments · Fixed by #3640
Closed

VRaw namespace support for svg contents. #3641

finnbear opened this issue Mar 23, 2024 Discussed in #3639 · 0 comments · Fixed by #3640

Comments

@finnbear
Copy link
Contributor

I tried the following:

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let contents = r##"<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />"##;
    let child = yew::Html::from_html_unchecked(yew::virtual_dom::AttrValue::from(contents));
    yew::html!{
        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
            {child}
        </svg>
    }
}

Which produced seemingly valid SVG within my DOM:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>

Which produced a blank SVG in Chrome and Firefox.

To make the circle visible, I need to:

  • enter inspect element
  • click "Edit as HTML" on the <svg>
  • defocus the text entry to save
  • browser re-parses the entire <svg>

I believe the issue is that element(s) in child are not properly namespaced. Reparsing the <svg/> lets the browser propagate the namespace.

This is related to finnbear/yew_icons#11

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

Successfully merging a pull request may close this issue.

1 participant