在 Python 中编辑 SVG 样式

快速回答： 要在 Python 中编辑 SVG 样式，请用 SVGDocument 加载文件，找到目标元素，通过 Element.set_attribute() 更新 presentation attributes 或 style 属性；当 SVG 使用 CSS 规则时，编辑 <style> 文本，然后保存文档。

from aspose.svg import SVGDocument

with SVGDocument("document.svg") as document:
    element = document.root_element.query_selector("#target")
    if element is not None:
        element.set_attribute("style", "fill:#dffbe1;stroke:#006b07;stroke-width:3")
    document.save("styled.svg")

在本文中，你将学习如何：

• 设置 SVG presentation attributes，例如 fill、stroke 和 stroke-width；
• 更新内联 style 属性中的值；
• 编辑 SVG <style> 块中保存的 CSS 规则；
• 切换类名，并理解哪一层样式具有优先级。

SVG 样式选项

SVG 样式可以来自属性、内联 CSS、样式块、类或继承的组样式。编辑文件之前，应检查源文件，并识别哪一层样式控制可见结果。本文关注样式结构和优先级； 在 Python 中修改 SVG 颜色 则关注颜色专用工作流，例如填充、描边和渐变 stop。

样式位置	示例	何时编辑它
Presentation attributes	fill="#e3f2fd" stroke="#1565c0"	用于一个元素上的简单、明确样式。
内联 style	style="fill:#fff3e0;stroke:#ef6c00"	当源 SVG 已经把多个声明存储在 style 中时使用。
CSS style block	<style>.panel { stroke-width: 3; }</style>	当多个元素共享基于类的规则时使用。
Class 或 ID 钩子	class="panel muted"	当你要切换应用哪条 CSS 规则时使用。
继承样式	<g opacity="0.45">...</g>	当父组应控制未覆盖该属性的子元素时使用。

样式优先级规则： 对同一个 SVG 属性，元素上的内联 style 通常优先级最高。<style> 块中的 CSS 规则可能会根据选择器 specificity 和源码顺序覆盖 presentation attributes。fill、stroke 或 opacity 这类 presentation attributes 通常是最简单的元素级值。父组的继承样式只会在子元素没有定义更强值时生效。

如何在 Python 中编辑 SVG 样式

当可见结果由 SVG 样式而不是几何数据控制时，可以使用这个工作流：

1. 用 SVGDocument 加载 SVG 文件。
2. 识别当前有效的样式层，例如 presentation attributes、内联 style、CSS 规则、类名或继承的组样式。
3. 使用 query_selector() 和稳定选择器找到目标元素或 <style> 块。
4. 使用 set_attribute() 更新相关样式属性、声明、CSS 规则或 class 值，或编辑 <style> 文本。
5. 使用 SVGDocument.save() 保存编辑后的 SVG，并检查更强的样式层是否覆盖了你的修改。

本文使用示例文件 work-with-svg-styles.svg 演示代码。运行示例时，可将它用作 data/work-with-svg-styles.svg。该示例包含三个可见卡片：一个使用 presentation attributes，一个使用内联 style，另一个使用 <style> 块中的 CSS 规则。

设置 Presentation Attributes

Presentation attributes 是最简单的样式层。若某个元素需要携带明确样式，例如 fill、stroke、stroke-width、opacity、font-size 或 display，可以使用它们。

下面的示例只更新 #presentation-card 内部的圆。它用 Element.query_selector() 找到元素，设置新的样式相关属性，并使用 SVGDocument.save() 将编辑后的 SVG 保存为 presentation-attributes-updated.svg。

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
output_path = os.path.join(output_folder, "presentation-attributes-updated.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    circle = document.root_element.query_selector("#presentation-card circle")

    if circle is not None:
        circle.set_attribute("fill", "#ffd4f8")
        circle.set_attribute("stroke", "#1565c0")
        circle.set_attribute("stroke-width", "3")

    document.save(output_path)

输出会保留原始 SVG 结构，但圆现在拥有自己的 fill、stroke 和 stroke-width 属性。由于样式直接写在目标元素上，这种方式在保存后的文件中很容易检查。

下图比较源 SVG (a) 与修改圆的 presentation attributes 后的结果 (b)。

更新内联 Style 声明

当 SVG 元素已经有 style 属性，并且你需要修改其中的值而不把样式移到 presentation attributes 时，可以使用这种方式。在示例 SVG 中，#inline-card 内的矩形包含三个内联声明：fill、stroke 和 stroke-width。

示例读取现有 style 值，替换已知声明，把更新后的 style 写回同一个矩形，并保存 inline-style-updated.svg。

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
output_path = os.path.join(output_folder, "inline-style-updated.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    panel = document.root_element.query_selector("#inline-card .panel")

    if panel is not None:
        style = panel.get_attribute("style")
        style = style.replace("fill:#fff3e0", "fill:#dffbe1")
        style = style.replace("stroke:#ef6c00", "stroke:#006b07")
        panel.set_attribute("style", style)

    document.save(output_path)

代码保留内联 style 属性，只修改定义面板颜色和轮廓的声明。这适合样式文本可预测的受控 SVG 模板。对于任意导出的 SVG 文件，应先在应用中解析或规范化 CSS 声明，再替换文本。

图像显示更新 fill、stroke 和 stroke-width 声明后，内联样式面板的变化。

编辑 CSS Style 块

有些 SVG 文件包含带有基于类规则的 <style> 元素。这在设计工具导出文件或模板生成文件中很常见。在这种情况下，应更新样式表文本，而不是在每个元素上设置同一个属性。

示例 SVG 使用 .panel 规则控制 #css-card 中的矩形，并使用 .muted 规则降低整个卡片的不透明度。下面的示例编辑这两条可见 CSS 规则：修改共享面板颜色，并让 CSS 样式卡片完全不透明。

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
output_path = os.path.join(output_folder, "css-block-updated.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    style_element = document.root_element.query_selector("style")

    if style_element is not None:
        css_text = style_element.text_content
        css_text = css_text.replace(
            ".panel { fill: #ffffff; stroke: #546e7a; stroke-width: 3; }",
            ".panel { fill: #ede7f6; stroke: #512da8; stroke-width: 5; }"
        )
        css_text = css_text.replace(".muted { opacity: 0.45; }", ".muted { opacity: 1; }")
        style_element.text_content = css_text

    document.save(output_path)

这种模式适合 CSS 文本可预测的受控 SVG 模板。代码更新 <style> 块中的共享类规则，因此所有使用这些类的元素都可以从一个位置改变。如果样式表被压缩、重排或由其他工具生成，请先在应用中用 CSS 解析器更新它，再把最终文本写回 <style> 元素。

下图比较源 SVG (a) 与编辑 CSS style 块中的规则后的输出 (b)。

修改基于 Class 的样式

当 SVG 外观已经由 CSS 规则描述，而元素只需要切换状态时，可以修改 class。例如，你可以删除 muted、添加 selected，或用一个 class 替换另一个 class，而不重写 <style> 块。

示例 SVG 在 #css-card 上使用 class="muted"。下面的示例删除该 class，因此 .muted 规则不再降低卡片不透明度。

import os
from aspose.svg import SVGDocument

input_folder = "data/"
output_folder = "output/"
input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
output_path = os.path.join(output_folder, "class-updated.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument(input_path) as document:
    css_card = document.root_element.query_selector("#css-card")

    if css_card is not None:
        css_card.set_attribute("class", "")

    document.save(output_path)

保存后的文件会保留 CSS 规则，但 #css-card 不再匹配 .muted。当 class 表示 selected、disabled、muted、highlighted 或 hidden 这类状态时，可以使用这种技术。

选择合适的样式编辑方法

任务	推荐方法	原因
让一个元素易于检查	Presentation attributes	最终值直接出现在元素上。
保留现有内联声明	更新 style 属性	SVG 保持与源文件相同的样式存储格式。
修改共享同一规则的多个元素	CSS style block	一条规则可以更新所有匹配元素。
切换预定义视觉状态	修改 class	CSS 保持集中，元素选择自己的状态。
调试没有生效的样式	检查优先级和选择器	可能存在更强的内联 style、CSS 规则或继承的组值。

显式的元素级输出可使用 presentation attributes。需要保留源文件已有样式存储方式时，使用内联样式。文件由 class 驱动，或多个元素应共享同一视觉规则时，使用 CSS 块。

常见错误和修复

问题	修复
选择器找不到任何内容	检查元素 ID、class、命名空间，以及目标是否真的存在于源 SVG 中。
属性修改没有可见效果	查找更高优先级的内联 style、CSS 规则或继承的组值。
更新 style 删除了其他设置	先读取当前 style 值，并保留输出中应继续存在的声明。
CSS 文本替换没有应用	样式表文本的空格或顺序可能不同。使用可预测模板，或在重写前解析 CSS。
输出文件没有变化	用 document.save(output_path) 保存编辑后的文档，并打开输出文件而不是原始输入。

FAQ

如何用 Aspose.SVG 在 Python 中编辑 SVG 样式？

用 SVGDocument 加载 SVG，找到目标元素，然后更新 presentation attributes、内联 style 属性、<style> 中的 CSS 文本或元素 class。更新后保存编辑后的文档。

应该使用 presentation attributes 还是内联 style？

对于简单、易检查的元素级编辑，使用 presentation attributes。如果源 SVG 已经把多个 CSS 声明存储在一个 style 属性中，并且你希望保留这种结构，则使用内联 style。

什么时候应该编辑 SVG style 块？

当一条 CSS 规则控制多个元素，或 SVG 来自使用 class 的模板时，编辑 <style> 块。这样一条规则就能更新所有匹配元素。

为什么 SVG 样式修改没有显示出来？

可能有更强的样式来源正在生效。检查内联 style、匹配的 CSS 选择器、继承的组样式，以及用于查找元素的确切选择器。

可以通过修改 class 改变 SVG 外观吗？

可以。如果 SVG 定义了可复用 CSS class，可以更新元素的 class 属性来切换视觉状态，而不重写样式表。

相关文章

• Python 高级 SVG 编辑 汇总了编辑 SVG 样式、几何图形和可复用图形的定向工作流。
• 在 Python 中修改 SVG 颜色 说明填充、描边、内联样式和渐变的颜色专用工作流。
• 在 Python 中移动、旋转和缩放 SVG 元素 介绍 SVG 元素和组的 transform 编辑。
• 处理 SVG 属性 说明如何获取、设置、检查、删除和更新 SVG 属性。
• 导航 SVG 说明如何检查 SVG 标记并查找目标元素。