svg

Jmix 3.1+

svg 组件可以直接在视图中渲染 SVG。

XML 元素

svg

Java 类

Svg

基本用法

将 SVG 的内容添加至内部 content 元素的 CDATA 中：

<svg id="statusSvg" css="color: seagreen">
    <content><![CDATA[
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <path d="m9 12 2 2 4-4"/>
        </svg>
    ]]></content>
</svg>
CDATA 块是必需的。如果没有，XML 解析器会将 SVG 标签读取为视图描述符的元素，将导致视图无法打开，并抛出 GuiDevelopmentException。
组件按原生内容渲染 SVG。如果 SVG 来自不受信任的来源（例如用户上传的文件），请在将其传递给组件之前对其进行清理。否则，可能导致跨站脚本攻击。

组件没有尺寸属性。图像的大小由 <svg> 根元素的 width、height 和 viewBox 属性定义。

SVG 在页面渲染后会成为页面的一部分，因此也会应用页面的样式。如果使用 currentColor 作为描边和填充（如上例所示），图像会采用组件的文本颜色，样式可以通过 CSS 更改。Jmix 的 image 和 svgIcon 组件的工作方式与该组件不同，它们是通过 URL 显示 SVG 文件，页面样式不会应用于图像内部。

来自文件的内容

使用 file 属性从文件加载 SVG：

<svg id="workflowSvg" file="com/company/onboarding/view/component/svg/workflow.svg"/>

文件路径由 Resources 接口解析。默认情况下，文件从类路径加载。还可以使用 classpath: 前缀、URL 或使用配置目录中文件的路径。详情请参见 资源位置。

如果找不到文件，视图将无法打开，并抛出 GuiDevelopmentException。如果同时设置了 content 和 file，组件使用 content。

编程方式设置内容

声明组件时不设置 content 和 file：

<svg id="dotSvg" css="color: orange"/>

然后在视图控制器中使用 setSvg() 方法设置：

@ViewComponent
private Svg dotSvg;

@Subscribe
public void onInit(final InitEvent event) {
    dotSvg.setSvg("""
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                <circle cx="8" cy="8" r="6" fill="currentColor"/>
            </svg>
            """);
}

setSvg() 方法还接收 InputStream，例如从文件读取 SVG。

SVG 必须包含 <svg> 元素。其前面的 XML 声明和文档类型声明会被移除。如果标记不包含 <svg>，该方法会抛出 IllegalArgumentException。

XML 属性

下面是 svg 的特殊属性：

名称 描述 默认值

file

设置包含 SVG 的文件路径。请参见 来自文件的内容。

—

下面是 svg 支持的其他通用属性：

id - alignSelf - classNames - colspan - css - justifySelf - visible

事件和处理器

下面是 svg 支持的通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 svg 组件可以包含一个 content 元素，其中包含包裹在 CDATA 块中的 SVG 内容。请参见 基本用法。