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

2024-06-26 13:58:37 发布

您现在位置：Python中文网/ 问答频道 /正文
8051 3

我试图在Wikipedia上显示一些包含SVG图像的数学文章 在QtWebView中，虽然我不知道如何设置图像的width和{}属性。QtWebView将忽略这些属性，当我 省略它们，图像很小。在

可以按如下方式进行测试： 下载thisHTML编辑器。 转到this网页并下载例如thisSVG图像。在

创建img元素，反映Wikipedia中的样式：

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

图像将被忽略。在

下面的工作，但图像非常小。在

^{pr2}$

如何以正确的大小（宽度和高度）显示图像？在


Tags： svg图像img属性方式文章数学wikipedia
2条回答
网友
1楼 · 编辑于 2024-06-26 13:58:37

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

<img src="https://www.w3.org/Icons/SVG/svg-logo.svg" height='200px' />
网友
2楼 · 编辑于 2024-06-26 13:58:37

尝试使用此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样式：

^{pr2}$

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

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

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()公共函数：

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))

另请看描述基于XML方法的Qt SVG Documentation的官方文件Here。在

相关问题 更多 >

    编程相关推荐