C#实现批量替换SVG中transform属性为x/y属性的方法

你需要将SVG字符串里text元素的transform="translate(X,Y)"替换为x="X" y="Y"，下面是两种可行的实现方案：

方案一：正则表达式（适合简单场景） #

如果你的SVG里text元素的transform属性只有translate(X,Y)这一种形式，没有其他复合变换（比如同时包含rotate、scale），可以用正则捕获组来提取X和Y的值，直接替换字符串。

Python示例 #

import re

svg_str = '''<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;475.07&quot; height=&quot;475.07&quot; viewBox=&quot;-5 -5 1200.075 900.075&quot; fill=&quot;#FFF&quot;&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(52.7996,761.494)&quot;  font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-800&lt;/text&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(117.0119,761.494)&quot; font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-700&lt;/text&gt;
    &lt;polyline points=&quot;52.7996,45.8345 52.7996,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
    &lt;polyline points=&quot;117.0119,45.8345 117.0119,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
&lt;/svg&gt;'''

# 匹配transform="translate(X,Y)"的正则，捕获X和Y
pattern = re.compile(r'transform=&quot;translate\(([^,]+),([^)]+)\)&quot;')
# 替换为x="X" y="Y"
modified_svg = pattern.sub(r'x=&quot;\1&quot; y=&quot;\2&quot;', svg_str)

print(modified_svg)

JavaScript示例 #

const svgStr = `<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;475.07&quot; height=&quot;475.07&quot; viewBox=&quot;-5 -5 1200.075 900.075&quot; fill=&quot;#FFF&quot;&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(52.7996,761.494)&quot;  font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-800&lt;/text&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(117.0119,761.494)&quot; font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-700&lt;/text&gt;
    &lt;polyline points=&quot;52.7996,45.8345 52.7996,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
    &lt;polyline points=&quot;117.0119,45.8345 117.0119,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
&lt;/svg&gt;`;

const regex = /transform=&quot;translate\(([^,]+),([^)]+)\)&quot;/g;
const modifiedSvg = svgStr.replace(regex, 'x=&quot;$1&quot; y=&quot;$2&quot;');

console.log(modifiedSvg);

方案二：使用SVG/XML解析库（更可靠，推荐） #

如果你的SVG可能存在复杂的transform组合（比如translate+rotate），或者属性格式不固定（比如空格、换行），用专门的解析库能更准确地处理，避免正则匹配出错。

Python示例（使用lxml） #

from lxml import etree

svg_str = '''<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;475.07&quot; height=&quot;475.07&quot; viewBox=&quot;-5 -5 1200.075 900.075&quot; fill=&quot;#FFF&quot;&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(52.7996,761.494)&quot;  font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-800&lt;/text&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(117.0119,761.494)&quot; font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-700&lt;/text&gt;
    &lt;polyline points=&quot;52.7996,45.8345 52.7996,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
    &lt;polyline points=&quot;117.0119,45.8345 117.0119,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
&lt;/svg&gt;'''

# 解析SVG字符串
root = etree.fromstring(svg_str.replace('&quot;', '"'))

# 遍历所有text元素
for text_elem in root.xpath('//text'):
    transform_attr = text_elem.get('transform')
    if transform_attr and 'translate' in transform_attr:
        # 提取translate的参数
        translate_part = transform_attr.split('(')[1].split(')')[0]
        x, y = translate_part.split(',')
        # 添加x和y属性
        text_elem.set('x', x.strip())
        text_elem.set('y', y.strip())
        # 删除transform属性
        text_elem.attrib.pop('transform')

# 转换回字符串，替换引号为&quot;
modified_svg = etree.tostring(root, encoding='unicode').replace('"', '&quot;')
print(modified_svg)

JavaScript示例（使用DOMParser） #

const svgStr = `<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;475.07&quot; height=&quot;475.07&quot; viewBox=&quot;-5 -5 1200.075 900.075&quot; fill=&quot;#FFF&quot;&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(52.7996,761.494)&quot;  font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-800&lt;/text&gt;
    &lt;text dominant-baseline=&quot;hanging&quot; text-anchor=&quot;middle&quot; transform=&quot;translate(117.0119,761.494)&quot; font-family=&quot;Segoe UI&quot; font-size=&quot;12&quot; font-weight=&quot;400&quot; fill=&quot;black&quot;&gt;-700&lt;/text&gt;
    &lt;polyline points=&quot;52.7996,45.8345 52.7996,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
    &lt;polyline points=&quot;117.0119,45.8345 117.0119,750.494&quot; style=&quot;fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0.250980392156863&quot; shape-rendering=&quot;crispEdges&quot; /&gt;
&lt;/svg&gt;`;

// 解析SVG
const parser = new DOMParser();
const doc = parser.parseFromString(svgStr.replace('&quot;', '"'), 'image/svg+xml');

// 获取所有text元素
const textElements = doc.querySelectorAll('text');
textElements.forEach(elem => {
    const transform = elem.getAttribute('transform');
    if (transform && transform.includes('translate')) {
        // 提取X和Y
        const match = transform.match(/translate\(([^,]+),([^)]+)\)/);
        if (match) {
            const x = match[1].trim();
            const y = match[2].trim();
            elem.setAttribute('x', x);
            elem.setAttribute('y', y);
            elem.removeAttribute('transform');
        }
    }
});

// 转换回字符串，替换引号为&quot;
const modifiedSvg = new XMLSerializer().serializeToString(doc).replace('"', '&quot;');
console.log(modifiedSvg);

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