顯示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圖像具有合適的尺寸

回答

相關問題