PyQt6加载SVG时元素百分比尺寸显示异常的问题求助

你遇到的问题其实是QSvgRenderer的一个默认行为：当SVG元素使用百分比尺寸时，它不会自动关联到SVG的viewBox或根元素宽高，而是默认用100x100的基准尺寸解析百分比，这就导致红色矩形没铺满400x400的画布。而Firefox、Inkscape这类工具会自动把百分比尺寸绑定到SVG的viewBox或根元素尺寸，所以显示正常。下面是两种可行的解决方案：

方案1：基于viewBox设置SVG元素的尺寸 #

你的SVG已经明确指定了viewBox="0 0 400.00 400.00"，我们可以直接从QSvgRenderer中获取这个尺寸，强制QGraphicsSvgItem用这个尺寸渲染，这样百分比元素就会基于400x400计算。

修改后的完整代码如下：

from PyQt6.QtWidgets import QWidget, QVBoxLayout, QGraphicsView, QGraphicsScene, QApplication
from PyQt6.QtSvgWidgets import QGraphicsSvgItem
from PyQt6.QtSvg import QSvgRenderer
from PyQt6.QtCore import Qt  # 导入Qt枚举类
import sys

class PlotPanel(QWidget):
    def __init__(self, svgpath, parent=None):
        super().__init__(parent)
        layout = QVBoxLayout(self)
        self.scene = QGraphicsScene()
        self.view = QGraphicsView(self.scene)
        layout.addWidget(self.view)
        
        # 读取SVG内容并初始化渲染器
        with open(svgpath, 'r', encoding='utf-8') as f:
            data = f.read()
        self.renderer = QSvgRenderer(bytes(data, "UTF-8"))
        
        # 获取SVG的viewBox逻辑尺寸
        view_box_rect = self.renderer.viewBox()
        
        self.svg = QGraphicsSvgItem()
        self.svg.setSharedRenderer(self.renderer)
        # 强制SVG元素的渲染范围匹配viewBox
        self.svg.setRect(view_box_rect)
        self.scene.addItem(self.svg)
        
        # 让视图自适应场景大小，保持宽高比
        self.view.fitInView(self.scene.sceneRect(), Qt.AspectRatioMode.KeepAspectRatio)
        # 可选：设置窗口初始大小匹配SVG尺寸
        self.resize(view_box_rect.width(), view_box_rect.height())

app = QApplication(sys.argv)
if len(sys.argv) < 2:
    print("请传入SVG文件路径作为参数")
    sys.exit(1)
svgpath = sys.argv[1]
window = PlotPanel(svgpath)
window.show()
app.exec()

关键修改说明： #

• self.renderer.viewBox()：获取SVG的核心逻辑画布尺寸，这是所有元素缩放的基准
• self.svg.setRect(view_box_rect)：强制SVG元素用viewBox的尺寸渲染，让百分比尺寸基于这个矩形计算
• fitInView：让视图自动适配场景，避免元素被裁剪或拉伸变形
• 窗口初始尺寸设置：提升首次打开时的用户体验

方案2：手动解析SVG根元素的宽高属性 #

如果你的SVG没有指定viewBox，但根元素有明确的width和height属性，可以手动解析这些数值来设置尺寸，示例代码片段如下：

import re

# 读取SVG内容
with open(svgpath, 'r', encoding='utf-8') as f:
    svg_content = f.read()

# 匹配根元素的width和height属性
width_match = re.search(r'width="([\d.]+)"', svg_content)
height_match = re.search(r'height="([\d.]+)"', svg_content)
if width_match and height_match:
    svg_width = float(width_match.group(1))
    svg_height = float(height_match.group(1))
    # 后续将svg item的rect设置为(0, 0, svg_width, svg_height)即可

不过这种方式不如基于viewBox可靠——viewBox是SVG的核心逻辑尺寸，即使根元素宽高变化，它也能保证元素比例正确。

验证效果 #

运行修改后的代码python showsvg6.py test.svg，你会看到红色矩形铺满整个400x400画布，多边形也正确显示在上方，和其他工具的显示效果完全一致。

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