Vue.py

外观

本页目录

SVG 矢量图 ​

PnSVG 组件如果提供本地路径，则将 .svg 矢量图文件嵌入到面板中，或者如果提供 URL，则会链接到远程图像。

底层实现为panel.pane.SVG，参数基本一致，参考文档：https://panel.holoviz.org/reference/panes/SVG.html

基本用法 ​

PnSVG 组件可以指向任何本地或远程 .svg 文件。如果给定以 http 或 https 开头的 URL，则 embed 参数决定图像是嵌入还是链接到：

调整大小 ​

我们可以通过设置特定的固定 width 或 height 来调整图像的大小：

与任何其他组件一样，PnSVG 组件可以通过设置 object 参数来更新：

响应式 SVG ​

您也可以使用 响应式 sizing_mode，如 'stretch_width'：

请注意，默认情况下图像的宽高比是固定的，要覆盖此行为，请设置 fixed_aspect=false 或提供固定的 width 和 height 值。

编码选项 ​

SVG 图像可以使用 base64 编码进行嵌入。使用 encode 参数可以控制是否对 SVG 进行编码：

当启用编码时，SVG 链接可能无法工作，而禁用编码会阻止图像缩放正常工作。

API ​

属性 ​

属性名说明类型默认值
object要显示的 SVG 文件。可以是指向本地或远程文件的字符串，或具有 _repr_svg_ 方法的对象str, object None
alt_text添加到图像标签的替代文本。当用户无法加载或显示图像时显示替代文本str None
embed如果给定图像 URL，这决定图像是否将被嵌入为 base64 或仅链接到boolean False
encode是否将 SVG 编码为 base64。启用时 SVG 链接可能无法工作，而禁用编码会阻止图像缩放正常工作boolean True
fixed_aspect是否强制图像的宽高比相等boolean True
link_url使图像可点击并链接到其他网站的链接 URLstr None
styles指定 CSS 样式的字典dict {}
sizing_mode尺寸调整模式str 'fixed'
width宽度int, str None
height高度int, str None
min_width最小宽度int None
min_height最小高度int None
max_width最大宽度int None
max_height最大高度int None
margin外边距int, tuple 5
css_classesCSS类名列表list []

Slots ​

插槽名说明
default自定义默认内容

Controls ​

src/examples/panel_vuepy/panes/SVG

在 GitHub 上编辑此页