添加高级 SVG 图像

将高级 SVG 图像添加到画布,以在设计时或运行时更改图像中各个部分的属性。
小贴士: 例如,可以通过突出显示硬件组件表示形式来指示硬件部件故障。
先决条件
要控制图像属性,请获取符合以下要求的 SVG 文件:
  • 文件格式为 SVG 1.2 Tiny
  • 存在填充和笔画属性,并且颜色定义为 XML 属性或内联 CSS
  • 颜色值为十六进制
小贴士: 如果 SVG 文件不符合要求,则图像将按预期显示,但您无法更改图像属性。
  1. 添加高级 SVG 图像
  2. 项目视图
    中,右键单击包含图像的对象或文件夹,然后选择
    新建
    绘图
    高级 SVG 图像
  3. 双击画布上显示的空图像
    Image placeholder
  4. 选择文件
    中,选择要显示的图像,然后选择
    选择
    小贴士: 如果在
    选择文件
    中没有看到该文件,请选择
    导入文件
    ,在
    导入文件
    中选择要导入的文件,然后选择
    选择
  5. (可选)在文本编辑器中打开 SVG 文件,验证要更改的图像元素的
    @id
    属性。
    例如:
    <g id="
    ConveyorChassis
    "> <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/> </g>
  6. 属性
    属性
    #
    下,从
    ID
    中选择要更改的图像元素。
    小贴士: 下拉选项与 SVG 文件元素的
    @id
    属性相对应。如果下拉框中未显示值,表示 SVG 图像可能与控制图像属性所需的要求不符。
  7. 中,可以:
    • 输入十六进制颜色值。
    • 使用转换器创建指向十六进制颜色值的复杂动态链接。
      复杂动态链接示例
  8. (可选)要更改图像的不同部分,请在
    SVG 元素属性
    旁选择
    Add
    ,并重复 56
高级 SVG 图像示例 - 禁用报警(灰色传送带机架)
高级 SVG 图像示例 - 启用报警(红色传送带机架)
请参见完整应用程序示例:开发用于更改颜色的图标
提供反馈
对本文档有问题或反馈吗? 请在这里提交您的反馈