如何使用 dash-svg 在 Plotly Dash 中引用 SVG 文件

Question

我正在尝试引用资产文件夹中的本地图像并将其显示为 Dash 页面标题的一部分。代码类似于这样：

from Dash import Dash, dcc. html, Input, Output, State, callback
from dash_svg import Svg, Image

html.Nav(
    children=[
        html.H6('Page Title'),
        Svg(children=[
                Image(children='assets/my_svg.svg', height="2rem", width="auto")
            ],
            viewBox='0 0 10 7'
        )
    ]
)

我已经通读了这里的“文档”（实际上只是 JS 文件）dash-svg 参考和 Mozilla 参考Mozilla 标签（因为 dash-svg 开发人员将该包描述为“轻型包装器”） “这是从 Mozilla 网站自动抓取的），但似乎没有任何方法可以直接在 Svg 或 Image 对象中引用文件，就像在带有 href 标签的直接 HTML 中一样，例如

<image href="assets/my_svg.svg" height="2rem", width="auto"/>

我得到的只是一个空框，大约与我描述的图像大小相同......但没有图像。当您检查它时，HTML 元素就会显示出来。有谁知道如何正确执行此操作？

Answer 1

类

html.Img

也处理

svg

文件。

dash_svg.Svg

更多的是关于此类文件的构建，可能是动态的。

SVG 文件

from dash import html

html.Img(
    src='assets/my_svg.svg',
    style={'height': '2em', 'width': 'auto'}),

呈现为：

<img src="assets/my_svg.svg" style="height: 2em; width: auto;">

SVG 定义

import dash_svg as svg

svg.Svg(
    viewBox='0 0 55 55',
    children=svg.G(
        fill='white',
        children=[
            svg.Circle(cx=30, cy=30, r='25', strokeWidth=5, stroke='green'),
            svg.Circle(cx=40, cy=40, r='25', strokeWidth=5, stroke='green')]
    )
)

呈现为：

<svg viewBox="0 0 55 55">
  <g fill="white">
    <circle cx="30" cy="30" r="25" stroke="green" stroke-width="5"></circle>
    <circle cx="40" cy="40" r="25" stroke="green" stroke-width="5"></circle>
  </g>
</svg>

图片：