文章/答案/技术大牛

发布

社区首页 >问答首页 >在QtWebView中以合适的大小显示SVG图像

问在QtWebView中以合适的大小显示SVG图像
EN

Stack Overflow用户

提问于 2017-06-27 17:17:07

回答 2查看 1.1K关注 0票数 1

我正在尝试在QtWebView中显示一些包含SVG图像中的数学的维基百科文章，尽管我不知道如何设置图像的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

svg

pyqt

qtwebkit

qtwebview

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-29 23:38:47

尝试使用此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()公共函数：

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的方法Here的官方Qt SVG Documentation。

票数 2

Stack Overflow用户

发布于 2017-06-29 19:33:20

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44776474

复制

相似问题

问在QtWebView中以合适的大小显示SVG图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在QtWebView中以合适的大小显示SVG图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在QtWebView中以合适的大小显示SVG图像
EN