如何将SVG中<image>元素的transform转换为x/y坐标？

如何将SVG中元素的transform属性转换为x/y坐标属性 #

针对SVG中<image>元素的transform属性（如translate()或matrix()），可以通过以下两种方式将其转换为直接设置x/y坐标的形式：

一、手动计算（适合少量元素） #

处理translate变换 #

如果transform是translate(tx ty)格式，直接提取括号内的两个数值分别作为x和y的值，然后移除transform属性即可：

• 原代码：<image transform="translate(32.83 269.65)" width="100" height="80" ...>
• 修改后：<image x="32.83" y="269.65" width="100" height="80" ...>

处理matrix变换 #

对于matrix(a b c d e f)格式，其中最后两个参数e和f对应平移的x和y偏移量。如果矩阵包含缩放（如a/d不等于1），还需要同步调整<image>的width和height：

• 原代码：<image transform="matrix(1.0909 0 0 1.0909 32.8309 269.65)" width="109.09" height="97.18" ...>
• 计算后：x=32.8309，y=269.65，width=109.09/1.0909=100，height=97.18/1.0909≈89
• 修改后：<image x="32.8309" y="269.65" width="100" height="89" ...>

二、自动化脚本处理（适合大量元素） #

浏览器控制台脚本 #

打开包含目标SVG的网页，按F12进入控制台，复制运行以下代码，自动处理所有<image>元素：

document.querySelectorAll('svg image').forEach(img => {
  const transformAttr = img.getAttribute('transform');
  if (!transformAttr) return;

  // 解析translate变换
  const translateMatch = transformAttr.match(/translate\(([^)]+)\)/);
  if (translateMatch) {
    const [tx, ty] = translateMatch[1].split(/[, ]+/).map(Number);
    img.setAttribute('x', tx);
    img.setAttribute('y', ty);
    img.removeAttribute('transform');
    return;
  }

  // 解析matrix变换
  const matrixMatch = transformAttr.match(/matrix\(([^)]+)\)/);
  if (matrixMatch) {
    const [a, b, c, d, e, f] = matrixMatch[1].split(/[, ]+/).map(Number);
    img.setAttribute('x', e);
    img.setAttribute('y', f);
    // 同步调整宽高（若有缩放）
    const originalWidth = parseFloat(img.getAttribute('width'));
    const originalHeight = parseFloat(img.getAttribute('height'));
    if (originalWidth && a !== 1) img.setAttribute('width', originalWidth / a);
    if (originalHeight && d !== 1) img.setAttribute('height', originalHeight / d);
    img.removeAttribute('transform');
  }
});

运行后，右键保存修改后的SVG即可。

Python脚本处理本地SVG文件 #

如果需要批量处理本地SVG文件，可使用Python的lxml库编写脚本：

from lxml import etree

def convert_image_transforms(input_svg, output_svg):
    tree = etree.parse(input_svg)
    namespace = {'svg': 'http://www.w3.org/2000/svg'}
    images = tree.xpath('//svg:image', namespaces=namespace)
    
    for img in images:
        transform = img.get('transform')
        if not transform:
            continue
        
        # 处理translate变换
        if transform.startswith('translate'):
            coords = transform.replace('translate(', '').replace(')', '').split(',')
            tx = coords[0].strip()
            ty = coords[1].strip() if len(coords) > 1 else '0'
            img.set('x', tx)
            img.set('y', ty)
            del img.attrib['transform']
        
        # 处理matrix变换
        elif transform.startswith('matrix'):
            params = transform.replace('matrix(', '').replace(')', '').split(',')
            a, b, c, d, e, f = [p.strip() for p in params]
            img.set('x', e)
            img.set('y', f)
            # 调整宽高
            width = img.get('width')
            if width and float(a) != 1:
                img.set('width', str(float(width) / float(a)))
            height = img.get('height')
            if height and float(d) != 1:
                img.set('height', str(float(height) / float(d)))
            del img.attrib['transform']
    
    tree.write(output_svg, encoding='utf-8', xml_declaration=True)

# 使用示例：替换为你的输入输出文件路径
convert_image_transforms('input.svg', 'output.svg')

使用前需安装lxml库：pip install lxml

内容的提问来源于stack exchange，提问作者Felix Olszewski