如何在Dioxus中渲染SVG并实现交互？解决格式识别错误

在Dioxus框架中尝试渲染SVG文件并实现元素隐藏、点击等交互功能时，使用manganis加载SVG出现格式无法识别错误，但加载PNG正常。

使用代码：

#[component]
fn SvgRender() -> Element {
    const svg_file: manganis::ImageAsset = manganis::mg!(image("/static/file.svg"));
    rsx! {
        div {
            img {
                src: "{svg_file}"
            }
        }
    }
}

报错信息：

2024-07-19T16:30:46.265425Z ERROR manganis_cli_support::manifest:
Failed to copy static asset: The image format could not be determined

2024-07-19T16:30:48.961980Z ERROR manganis_cli_support::manifest:
Failed to copy static asset: The image format could not be determined

2024-07-19T16:30:48.962471Z ERROR dioxus_cli::server: Other(The image
format could not be determined)

• 问题根源：manganis库专注于处理PNG、JPG这类光栅图像，不支持SVG矢量格式，因此无法识别SVG文件导致报错。

• 加载SVG的正确方式：
  不需要依赖manganis，直接通过以下两种方式加载：

  1. 静态文件引用
     如果不需要对SVG内部元素做交互，直接用img标签引用静态文件即可：

     #[component]
     fn SvgRender() -> Element {
         rsx! {
             div {
                 img {
                     src: "/static/file.svg",
                     alt: "SVG资源"
                 }
             }
         }
     }
     

     注意：确保SVG文件放在Dioxus配置的静态资源目录下（通常是public或static文件夹）。

  2. 内联SVG（支持交互）
     若要实现元素隐藏、点击等交互，必须将SVG代码内联到组件中，这样才能直接操作内部元素：

     #[component]
     fn InteractiveSvg() -> Element {
         // 用状态控制元素显示/隐藏
         let (is_triangle_hidden, set_is_triangle_hidden) = use_state(|| false);
     
         rsx! {
             div {
                 svg {
                     width: "200",
                     height: "200",
                     viewBox: "0 0 200 200",
                     // 点击SVG容器切换三角形显示状态
                     onclick: move |_| set_is_triangle_hidden(!is_triangle_hidden),
                     // 可交互的圆形元素
                     circle {
                         cx: "100",
                         cy: "100",
                         r: "80",
                         fill: "#4287f5",
                         onclick: move |evt| {
                             evt.stop_propagation(); // 阻止事件冒泡到父容器
                             println!("蓝色圆形被点击");
                         }
                     },
                     // 受状态控制的三角形元素
                     path {
                         d: "M50,50 L150,50 L100,150 Z",
                         fill: "#f54242",
                         hidden: "{is_triangle_hidden}"
                     }
                 }
             }
         }
     }
     

• 关键提示：

  • 用img标签引用的SVG是作为图片资源加载的，无法访问或修改其内部元素，因此无法实现元素级交互。
  • 内联SVG时，所有SVG属性和事件都可以直接通过Dioxus的rsx语法绑定，和普通HTML元素用法一致。

内容的提问来源于stack exchange，提问作者maja95