yewstack / yew

Rust / Wasm framework for creating reliable and efficient web applications
https://yew.rs
Apache License 2.0
30.23k stars 1.41k forks source link

`VRaw` namespace support for `svg` contents. #3641

Closed finnbear closed 1 month ago

finnbear commented 3 months ago

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:

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 https://github.com/finnbear/yew_icons/issues/11