组件：SVG图像框

SVG图像框组件用于显示SVG矢量图形，支持置SVG代码、加载SVG文件等特性，常用于矢量图标展示、SVG图像渲染、动态图形等场景，支持直接嵌入SVG代码或加载SVG文件。

典型使用场景：

• 矢量图标（应用图标、功能图标、品牌标识）
• 动态图形（动画效果、交互图形、动态图表）
• 数据可视化（矢量图表、信息图表、统计图形）
• 响应式设计（自适应图标、缩放图形、矢量插画）
• 品牌视觉（企业标识、产品图标、品牌元素）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

样式美化参考

SVG样式变体：

• 单色SVG：SVG颜色 = "#1890ff"，SVG填充 = "#1890ff"，SVG描边 = "none"，`SVG描边宽度 = 0
• 双色SVG：SVG颜色 = "#1890ff"，SVG填充 = "#1890ff"，SVG描边 = "#ffffff"，`SVG描边宽度 = 2
• 渐变SVG：SVG填充 = "linear-gradient(135deg, #1890ff, #096dd9)"，SVG描边 = "none"，`SVG描边宽度 = 0
• 透明SVG：SVG填充 = "rgba(24,144,255,0.3)"，SVG描边 = "rgba(24,144,255,0.5)"，`SVG描边宽度 = 1

尺寸样式：

• 小尺寸SVG：宽度 = 16，高度 = 16，SVG宽度 = 16，SVG高度 = 16，SVG视图框 = "0 0 16 16"
• 中尺寸SVG：宽度 = 24，高度 = 24，SVG宽度 = 24，SVG高度 = 24，SVG视图框 = "0 0 24 24"
• 大尺寸SVG：宽度 = 32，高度 = 32，SVG宽度 = 32，SVG高度 = 32，SVG视图框 = "0 0 32 32"
• 自定义尺寸：宽度 = 48，高度 = 48，SVG宽度 = 24，SVG高度 = 24，SVG视图框 = "0 0 24 24"

状态样式：

• 正常状态：边框 = "none"，背景颜色 = "transparent"，光标样式 = "default"
• 悬停状态：边框 = "none"，背景颜色 = "transparent"，光标样式 = "pointer"，SVG颜色 = "#40a9ff"
• 选中状态：边框 = "none"，背景颜色 = "transparent"，SVG颜色 = "#096dd9"
• 禁用状态：边框 = "none"，背景颜色 = "transparent"，SVG颜色 = "#d9d9d9"，透明度 = "0.6"，光标样式 = "not-allowed"

图标样式：

• 线性图标：SVG描边 = "#1890ff"，SVG填充 = "none"，`SVG描边宽度 = 2
• 填充图标：SVG描边 = "none"，SVG填充 = "#1890ff"，`SVG描边宽度 = 0
• 双重图标：SVG描边 = "#1890ff"，SVG填充 = "#ffffff"，`SVG描边宽度 = 1
• 轮廓图标：SVG描边 = "#1890ff"，SVG填充 = "transparent"，`SVG描边宽度 = 2

动画样式：

• 旋转动画：动画 = "旋转"，动画时长 = "1s"，动画循环 = "无限"
• 缩放动画：动画 = "缩放"，动画时长 = "0.5s"，动画循环 = "无限"
• 淡入动画：动画 = "淡入"，动画时长 = "0.3s"，动画循环 = "1"
• 脉冲动画：动画 = "脉冲"，动画时长 = "1s"，动画循环 = "无限"

响应式样式：

• 移动端适配：宽度 = 20，高度 = 20，SVG宽度 = 20，SVG高度 = 20，SVG视图框 = "0 0 20 20"
• 平板端适配：宽度 = 24，高度 = 24，SVG宽度 = 24，SVG高度 = 24，SVG视图框 = "0 0 24 24"
• 桌面端适配：宽度 = 32，高度 = 32，SVG宽度 = 32，SVG高度 = 32，SVG视图框 = "0 0 32 32"

特殊样式：

• 阴影效果：阴影 = "0 2px 4px rgba(0,0,0,0.1)"，边框 = "none"，背景颜色 = "transparent"
• 发光效果：阴影 = "0 0 8px rgba(24,144,255,0.5)"，边框 = "none"，背景颜色 = "transparent"
• 边框效果：边框 = "1px solid #e8e8e8"，边框圆角 = "4px"，背景颜色 = "#ffffff"，SVG填充 = "#1890ff"
• 卡片效果：边框 = "none"，边框圆角 = "8px"，阴影 = "0 2px 8px rgba(0,0,0,0.1)"，背景颜色 = "#ffffff"，SVG填充 = "#1890ff"

示例代码

变量 SVG图像框1 = 创建 SVG图像框()
SVG图像框1.左边 = 100
SVG图像框1.顶边 = 100
SVG图像框1.宽度 = 200
SVG图像框1.高度 = 200
SVG图像框1.置SVG代码("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8\" fill=\"#1890ff\"/></svg>")
SVG图像框1.加载SVG文件("static/logo.svg")

函数：置SVG代码(SVG代码)

设置SVG图形代码。

函数：加载SVG文件(SVG文件地址)

加载SVG图片代码文件（.svg）并渲染。