Closed finnbear closed 1 month 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:
<svg>
I believe the issue is that element(s) in child are not properly namespaced. Reparsing the <svg/> lets the browser propagate the namespace.
child
<svg/>
This is related to https://github.com/finnbear/yew_icons/issues/11
I tried the following:
Which produced seemingly valid SVG within my DOM:
Which produced a blank SVG in Chrome and Firefox.
To make the circle visible, I need to:
<svg>
<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 https://github.com/finnbear/yew_icons/issues/11