Request to add <image> element under the <svg> element (https://developer.mozilla.org/fr/docs/Web/SVG/Element/image)

[fdgStilla]

Specific Demand

It is not possible to add an image element under a svg element.

Also is there any way to make it work with the 0.4.3? I could not find any example on how to create a custom element:

• https://docs.rs/dioxus-html/0.4.3/dioxus_html/ seems to talk about a DioxusElement that I cannot find
• custom element example is clearly marked as missing here: https://github.com/DioxusLabs/dioxus/tree/main/examples#todo

[ealmloff]

It looks like an image component existed at one point but is currently commented out:

dioxus/packages/html/src/elements.rs

Lines 1616 to 1619 in 451a8f2

	// /// Build a
	// /// [`<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image)
	// /// element.
	// image "http://www.w3.org/2000/svg" {};

[fdgStilla]

Ok I tried to uncomment the element and it works. It posted the PR on main but I am still interested in learning how to workaround this issue with the 0.4.3.

[ealmloff]

To work around this issue in 0.4.3, you can create your own dioxus_elements mod like this:

use dioxus::prelude::*;

#[component]
fn SvgImage<'a>(cx: Scope<'a>) -> Element<'a> {
    mod dioxus_elements {
        pub struct image;

        impl image {
            pub const TAG_NAME: &'static str = "image";
            pub const NAME_SPACE: Option<&'static str> = Some("http://www.w3.org/2000/svg");
            // Tuple: (attribute name, namespace, volatile)
            pub const href: (&'static str, Option<&'static str>, bool) = (stringify!($fil), None, false);
        }
        impl dioxus::prelude::SvgAttributes for image {}
    }
    render! {
        image {
            href: "https://www.rust-lang.org/logos/rust-logo-512x512.png",
        }
    }
}

fn main(){}

[fdgStilla]

I tried to use it but I could not make it work:

fn main() {
    dioxus_desktop::launch(App);
}

fn App(cx: Scope) -> Element {
    cx.render(rsx!(
        // both the following create an empty main div
        svg{SvgImage{}}
        SvgImage{}
        // some other combination with image{} tag do not compile
    ))
}