SVG#

SVG 是一个用于显示 SVG 矢量图像的视图组件，支持从以下三种来源加载 SVG 内容：

• 网络图片 URL
• 本地文件路径
• 内联 SVG 代码

SVG 图像在显示时会作为位图进行渲染（不再支持矢量绘制）。你可以选择以模板图像的方式渲染，从而实现着色功能。

#使用方式

import { SVG } from 'scripting'

#Props（属性）

#图像来源（3选1，必须指定一个）

注意：以上三个属性互斥，只能设置其中一个。

#图像渲染行为（ImageRenderingBehaviorProps）

#resizable 属性详细说明

#示例

#从本地文件加载 SVG 并作为模板图像渲染

<SVG
  filePath="/path/to/local/image.svg"
  resizable
  frame={{ width: 50, height: 50 }}
  renderingMode="template"
  foregroundColor="red"
/>

#使用内联 SVG 代码渲染图像

<SVG
  code={`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>`}
  frame={{ width: 100, height: 100 }}
/>

#注意事项

• SVG 图像现在统一以位图方式渲染，不再支持 vectorDrawing 属性。
• 若希望对图像进行着色，可设置 renderingMode="template" 并搭配 foregroundColor。
• 所有图像来源字段（url、filePath、code）只能设置一个，不能同时使用。