显示SVG图像具有合适的尺寸

我想在SVG图像0在QtWebView显示包含一些数学维基百科的文章，但我想不出如何设置图像的width和height属性。 QtWebView将忽略这些属性，当我忽略它们时，图像非常小。显示SVG图像具有合适的尺寸

您可以测试它如下：下载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" >

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

来源

2017-06-27 xralf

为什么“python”标记？ –

@CarlesMitjans使用PyQT编辑器是'pyhtmleditor'，所以它是用Python编写的 – xralf

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

很多时候SVG高度或宽度在WebKit浏览器不正确地计算。为了解决这个问题，利用这个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))

也期待在官方Qt SVG Documentation描述XML为基础的方法Here。

来源

2017-06-29 15:38:47 andy

我想更改HTML代码中的尺寸。例如该应用程序对初始HTML有一个调用'self.webView.setHtml（“

”）'。假设我不会更改应用程序代码，但只需将HTML文件（以编程方式）导入图像中。 SVG图像制造麻烦，所以我想将'width'和'height'转换为看起来不错的结果。 – xralf

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

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

来源

2017-06-29 11:33:20 napuzba

你是如何插入它的？当我用'Edit' - >'Insert HTML'粘贴时，它会忽略代码。 – xralf

你可以尝试一下上面的图片吗？ – napuzba

我试过了，但它忽略了插入的HTML（） – xralf

显示SVG图像具有合适的尺寸

回答

相关问题