如何从XML格式的SVG文本中获取可交互的Skia Path对象？

我完全懂你的困扰！手里握着XML结构的SVG文本，想转成能自由交互的Skia Path，结果要么得到的是没法编辑的SVG图像，要么现成的Path方法只认路径命令字符串，根本不买完整XML的账。别发愁，咱们一步步来解决：

核心思路 #

Skia的Path.MakeFromSVGString只认<path>标签里那种d="M10 20..."的路径命令，而完整XML格式的SVG是由多个基础形状节点（比如<rect>、<line>）组成的。所以我们的解决办法是：解析XML提取每个形状的属性，再把每个基础形状手动转换成Skia Path。

具体实现步骤（以JS/TS环境为例） #

1. 解析XML，提取图形元素

首先把XML格式的SVG字符串解析成DOM结构，这样就能方便地取出每个形状节点和它们的属性：

2. 逐个转换为Skia Path

每个SVG基础形状都能对应转换成Skia的Path操作，比如矩形用MakeRect，直线用moveTo+lineTo，直接上代码：

import { Skia } from "@shopify/react-native-skia";

export const MY_SVG = ` <svg width='500' height='940' xmlns='http://www.w3.org/2000/svg'> <rect width='500' height='940' stroke='green' fill='none' /> <line x1='0' y1='470' x2='500' y2='470' stroke='yellow' /> <rect x='190' y='0' width='120' height='190' stroke='yellow' fill='none' /> </svg> `;

// 第一步：解析SVG XML，提取所有图形节点
const parser = new DOMParser();
const svgDoc = parser.parseFromString(MY_SVG, "image/svg+xml");
const shapeNodes = svgDoc.querySelectorAll("rect, line");

// 第二步：把每个SVG形状转成Skia Path
const skiaPaths = Array.from(shapeNodes).map(node => {
  const path = Skia.Path.Make();
  const tag = node.tagName.toLowerCase();

  switch (tag) {
    case "rect":
      // 提取矩形的x、y、width、height属性
      const x = parseFloat(node.getAttribute("x") || "0");
      const y = parseFloat(node.getAttribute("y") || "0");
      const w = parseFloat(node.getAttribute("width") || "0");
      const h = parseFloat(node.getAttribute("height") || "0");
      // 添加矩形路径
      path.addRect(Skia.XYWHRect(x, y, w, h));
      break;
    case "line":
      // 提取直线的起点和终点坐标
      const x1 = parseFloat(node.getAttribute("x1") || "0");
      const y1 = parseFloat(node.getAttribute("y1") || "0");
      const x2 = parseFloat(node.getAttribute("x2") || "0");
      const y2 = parseFloat(node.getAttribute("y2") || "0");
      // 绘制直线路径
      path.moveTo(x1, y1);
      path.lineTo(x2, y2);
      break;
    // 可以扩展支持更多形状，比如circle、ellipse、polygon等
    default:
      break;
  }

  return path;
});

// 可选：把所有Path合并成一个单独的Path对象
const combinedPath = Skia.Path.Make();
skiaPaths.forEach(p => combinedPath.addPath(p));

// 现在skiaPaths里是每个形状的独立Path，combinedPath是合并后的整体Path
// 这两个都是完全支持交互的Skia Path对象！

额外说明 #

• 这种方式得到的Path完全支持Skia Path的所有原生操作，比如点击检测（hitTest）、缩放旋转、修改路径节点等，完全符合你的需求。
• 如果你的SVG里有<path>标签（带d属性的复杂路径），可以直接提取d属性的字符串，再用Skia.Path.MakeFromSVGString(dString)转换，完美兼容你之前知道的方法。
• 要是你在原生平台（Android/iOS）开发，只需要换用对应平台的XML解析工具来提取节点属性，形状转Path的逻辑是完全一样的。

再聊聊你之前的尝试 #

你用Skia.SVG(MY_SVG)生成的是SVG绘制对象，本质是渲染好的绘制指令或者位图，确实不是可编辑的Path；而Path.MakeFromSVGString本来就只认路径命令字符串，直接传整个XML肯定会失败，这俩的用法场景本来就不一样~

内容来源于stack exchange