如何修改导入KonvaJS的SVG文件：调整描边与尺寸

针对你提出的需求，这里提供两种可行的实现思路：

方法1：导入前修改SVG源内容 #

在将SVG传入Konva解析前，先修改SVG的原始内容，调整描边粗细等属性：

// 假设svgStr是上传获取的SVG字符串
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgStr, 'image/svg+xml');

// 遍历所有带描边的元素，按需调整描边宽度
const strokeElements = svgDoc.querySelectorAll('[stroke]');
strokeElements.forEach(el => {
  const currentWidth = parseFloat(el.getAttribute('stroke-width')) || 1;
  // 示例：将描边粗细放大2倍
  el.setAttribute('stroke-width', currentWidth * 2);
});

// 将修改后的SVG转回字符串
const modifiedSvgStr = new XMLSerializer().serializeToString(svgDoc);

// 导入到Konva舞台
const konvaGroup = Konva.Node.create(modifiedSvgStr, 'container');
stage.add(konvaGroup);

方法2：导入后遍历Konva节点修改属性 #

导入SVG得到Konva节点后，递归遍历所有子节点，直接修改Konva对象的属性：

// 先导入SVG到Konva
const konvaGroup = Konva.Node.create(svgStr, 'container');
stage.add(konvaGroup);

// 递归遍历并修改所有节点
function adjustNodeProps(node) {
  // 调整描边粗细（仅针对有描边的节点）
  if (node.strokeWidth) {
    node.strokeWidth(node.strokeWidth() * 2);
  }
  // 整体缩放示例：放大1.5倍
  node.scaleX(node.scaleX() * 1.5);
  node.scaleY(node.scaleY() * 1.5);

  // 处理子节点
  node.getChildren().forEach(child => adjustNodeProps(child));
}

adjustNodeProps(konvaGroup);
stage.draw(); // 手动触发重绘

额外提示 #

• 如果SVG通过内部<style>标签定义描边样式，方法1需要额外修改样式内容；方法2中Konva会优先使用节点的行内属性，可直接用strokeWidth覆盖样式。
• 缩放时若要保持节点居中，可调整位置抵消缩放带来的偏移：

const originalPos = konvaGroup.position();
const scaleRatio = 2; // 缩放倍数
konvaGroup.scale({x: scaleRatio, y: scaleRatio});
konvaGroup.position({
  x: originalPos.x - (konvaGroup.width() * (scaleRatio - 1)) / 2,
  y: originalPos.y - (konvaGroup.height() * (scaleRatio - 1)) / 2
});

内容的提问来源于stack exchange，提问作者Fuze Thien