Отображение изображения SVG в QtWebView с нужным размером

Я пытаюсь отобразить некоторые статьи Википедии, содержащие математику в SVG изображения в QtWebView, хотя я не могу понять, как установить width а также height атрибуты изображения. QtWebView будет игнорировать эти атрибуты, и когда я опущу их, изображение будет очень маленьким.

Вы можете проверить это следующим образом: Загрузите этот HTML-редактор. Перейдите на эту веб-страницу и загрузите, например, это изображение SVG.

Создайте элемент img, отражающий стиль в Википедии:

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

И изображение будет игнорироваться.

Следующее работает, но изображение очень маленькое.

<img src="e15d3619d42b28662c5952c9ece60cd928e31774.svg" >

Как отобразить изображение с нужным размером (шириной и высотой)?

Источник

2 ответа

Решение

Попробуйте использовать этот подход 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: Как масштабировать SVG.

Или попробуйте этот подход Python для изменения размеров изображения 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.

Источник

Используйте другие единицы для высоты и ширины. Например:

<img src="https://www.w3.org/Icons/SVG/svg-logo.svg" height='200px' />
Источник
Другие вопросы по тегам