在 QtWebView 中以正确的大小显示 SVG 图像答案

【问题标题】：Display SVG image in QtWebView with the right size在 QtWebView 中以正确的大小显示 SVG 图像
【发布时间】：2017-11-30 06:47:05
【问题描述】：

我正在尝试在SVG 图像中显示一些包含数学的维基百科文章在 QtWebView 中，虽然我不知道如何设置图像的 width 和 height 属性。 QtWebView 将忽略这些属性，当我省略它们，图像非常小。

您可以按如下方式对其进行测试：下载this HTML 编辑器。转到this 网页并下载例如this SVG 图片。

创建 img 元素，反映维基百科中的样式：

<img src="e15d3619d42b28662c5952c9ece60cd928e31774.svg" style="vertical-align: -0.671ex; width:25.517ex; height:2.343ex;">

并且图像将被忽略。

以下工作，但图像非常小。

<img src="e15d3619d42b28662c5952c9ece60cd928e31774.svg" >

如何以正确的尺寸（宽度和高度）显示图像？

【问题讨论】：

为什么要标记python？
@CarlesMitjans 编辑器是pyhtmleditor 使用PyQT，所以它是用Python编写的

标签： python svg pyqt qtwebkit qtwebview

【解决方案1】：

尝试使用这种 HTML 方法来更改 SVG 图像尺寸：

<!-- you can test this code in any online html editor. -->

<html>
    <head>
        <!-- blah blah blah... -->
    </head>
    <body>
        <p>all the images must be redrawn properly when SVG animation runs...</p>
        <img height="250px" width="800px" border="5" src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e15d3619d42b28662c5952c9ece60cd928e31774">
    </body>
</html>

在 WebKit 浏览器中，SVG 高度或宽度经常被错误地计算。要解决此问题，请使用以下 CSS 样式：

svg { width: 100%; height: auto; }

我最近发现了一个非常有用和有趣的帖子：CSS Tricks: How to Scale SVG。

或者尝试这种 Python 方法来更改 Here 中描述的 SVG 图像尺寸。

from PyQt5 import QtCore, QtGui, QtSvg
from PyQt5.QtWebKit import QGraphicsWebView
import sys

application = QtGui.QApplication(sys.argv)
myScene = QtGui.QGraphicsScene()
myView = QtGui.QGraphicsView(myScene)
box = QtSvg.QGraphicsSvgItem('/Users/swift/Desktop/myImage.svg').boundingRect()
webView = QGraphicsWebView()
webView.load(QtCore.QUrl('/Users/swift/Desktop/myImage.svg'))
webView.setFlags(QtGui.QGraphicsItem.ItemClipsToShape)
webView.resize(box.width(), box.height())

incWidth = 48
incHeight = 36
myScene.addItem(webView)
myView.resize(box.width() + incWidth, box.height() + incHeight)
myView.show()
sys.exit(app.exec_())

当然，您也可以使用参数调用setHtml() public 函数：

code = 
       """
       <html>
       <head>
       </head>
       <body>

       <!-- You can load SVG image itself. -->
       <img height="250px" width="800px" style="width: 100%;" src="myImage.svg">

       <!-- Or you can load SVG Viewport and use other images inside it. -->
       <svg width="600" height="450">
       <image href="myImage.svg" x="0" y="0" height="320px" width="240px"/>
       </svg>

       </body>
       </html> 
       """

self.webView.setHtml(code)

或者直接通过Qt分配大小：

svgImage = QImage(QSize(1280, 720))

另请参阅官方 Qt SVG Documentation 描述基于 XML 的方法 Here。

【讨论】：

我想更改 HTML 代码中的尺寸。例如应用程序调用self.webView.setHtml("<p></p>") 获取初始HTML。假设我不会更改应用程序代码，而只是将 HTML 文件（以编程方式）与图像一起导入其中。 SVG 图像有问题，所以我想将 width 和 height 转换为结果看起来不错的东西。

【解决方案2】：

使用其他单位表示高度和宽度。例如：

<img src="https://www.w3.org/Icons/SVG/svg-logo.svg" height='200px' />

【讨论】：

你是怎么插入的？当我用 Edit -> Insert HTML 粘贴它时，它将忽略代码。
你可以试试上面的图片吗？
我试过了，但是它忽略了插入的 HTML ()