Python修改SVG填充色对复杂SVG无效的问题排查

初始场景 #

现有如下格式的主页图标SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
  <path d="M11.45 43.25Q9.5 43.25 8.125 41.875Q6.75 40.5 6.75 38.55V19.7Q6.75 18.6 7.25 17.6Q7.75 16.6 8.65 15.95L21.15 6.55Q21.8 6.1 22.55 5.85Q23.3 5.6 24 5.6Q24.75 5.6 25.475 5.85Q26.2 6.1 26.85 6.55L39.35 15.95Q40.25 16.65 40.775 17.625Q41.3 18.6 41.3 19.7V38.55Q41.3 40.5 39.9 41.875Q38.5 43.25 36.55 43.25H28.3V27.7H19.7V43.25Z"/>
</svg>

为了将SVG中所有图形区域填充为指定十六进制纯色，编写了如下Python实现代码，使用示例为将svg42.svg文件填充为#00bbaa纯色：

import io

from PIL import Image
from cairosvg import svg2png
from lxml import etree


def svg2image(file: str, color: str, width: int, height: int):
        with open(f'{path}', 'r') as f:
        svg_data = f.read().encode('utf-8')

    root = etree.fromstring(svg_data)
    tree = etree.ElementTree(root)

    root.attrib["fill"] = color

    for path in root.iter('path'):
        path.attrib["fill"] = color

    imgdata = io.BytesIO()
    tree.write(imgdata)

    img = Image.open(io.BytesIO(svg2png(bytestring=imgdata.getvalue(), output_width=width, output_height=height)))

    return img

原代码逻辑：读取SVG文件内容，通过lxml解析后为根节点、所有path节点设置fill属性值为目标色，再通过cairosvg将修改后的SVG转为指定宽高的PNG，最终通过PIL读取返回图像对象。

故障现象 #

使用该脚本处理结构更复杂的SVG时，填充色修改完全不生效，出现问题的SVG代码如下：

<svg width="989" height="875" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="902" y="586" width="989" height="875"/></clipPath></defs>
    <g clip-path="url(#clip0)" transform="translate(-902 -586)"><rect x="902" y="586" width="639" height="652" fill="#ED7D31"/>
        <rect x="1252" y="810" width="639" height="651" fill="#4472C4"/></g></svg>

遗漏的必要处理步骤 #

原实现的覆盖范围存在明显缺失，具体遗漏了以下环节：

• 仅遍历了path标签，没有覆盖所有支持fill属性的SVG图形元素。除了<path>之外，<rect>、<circle>、<ellipse>、<polygon>、<polyline>、<line>、<text>等标签都可以作为填充载体，故障样例里的填充区域全是<rect>标签，原代码完全不会处理这类标签。
• 没有覆盖子元素自带的fill属性。SVG遵循元素自身属性优先级高于父节点继承属性的样式规则，原代码只给根节点加了fill属性，子元素如果本身已经写了fill值（比如故障样例里rect自带的#ED7D31、#4472C4），会直接覆盖根节点的继承样式，根节点设置的颜色完全不生效。
• 没有处理CSS方式定义的fill样式。复杂SVG经常会通过<style>标签编写全局CSS规则、或者给元素加style="fill:xxx"的内联样式，这类样式的优先级比普通标签属性更高，只修改标签的fill属性根本覆盖不了CSS定义的颜色。
• 存在基础代码错误：函数定义的入参是file，但是读文件的时候使用了未定义的path变量，运行时会直接抛出名称错误。

修正方向 #

1. 读文件时使用正确的入参变量，替换未定义的path
2. 扩大遍历范围，覆盖所有支持填充的SVG图形标签，不要只处理path
3. 对每个遍历到的图形元素，不管原来有没有fill属性、不管fill是通过标签属性还是内联style设置的，都强制覆盖为目标颜色
4. 清除SVG中<style>标签里编写的全局fill规则，避免样式优先级冲突

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