矢量图

操作步骤

本文主要介绍组件样式的个性配置。有关组件样式的通用配置，请参见样式配置。

1. 在Web可视化编辑页面，单击最左侧的组件图标。
2. 在画布左侧组件下拉列表，选择基础组件，并展开基础列表。
3. 拖拽一个矢量图组件到画布中，在右侧样式中选择以下方式配置图片源。
   

   • 单击选择SVG，上传本地SVG矢量图，或者从您已有的图片库中选择矢量图。
   • 单击选择SVG右侧的配置数据源按钮，支持绑定设备或接口，将返回的字符串作为图片URL。

   如果图片被拉伸展示，可通过配置W值（宽度）和H值（高度），设置图片大小

   上传矢量图后，支持修改图片填充颜色。填充颜色可以绑定接口数据源进行使用，支持的数据格式为RGB颜色的JSON，格式如下：

   注意

   • 目前仅支持对矢量图中的Path填充颜色。如果有其他元素的填充需求，请自行填充或联系IoT Studio技术人员。
   • 如果需要支持矢量图的缩放，请在矢量图文件中添加ViewBox属性，并指定原始缩放区域。

   {
     "r": 255,
     "g": 255,
     "b": 255
   }

   或者

   {
     "r": 255,
     "g": 255,
     "b": 255,
     "a":0
   }

   说明 其中a表示颜色透明度，取值范围为0~1。
4. 可选：在Web可视化编辑页面，选中目标组件的交互页签，配置事件和交互动作。详细配置指导请参见交互配置。
5. 单击页面右上方的预览，查看或调试组件的展示数据。