Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Setting repeating SVG pattern as main window/Qwidget backround.
Forum Updated to NodeBB v4.3 + New Features

Setting repeating SVG pattern as main window/Qwidget backround.

Scheduled Pinned Locked Moved Unsolved General and Desktop
3 Posts 2 Posters 668 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    RaisinBread22
    wrote on last edited by RaisinBread22
    #1

    I've generated the SVG css code through http://www.heropatterns.com/ and I'm trying to use it as the background for my main window/Qwidget. I want the background to resize as the window grows bigger or shrinks. I tried calling Form.setStyleSheet() withe the generated css being passed in as an argument, but I only get the one of the two colors in the pattern. What's the proper way to display a SVG as the backround? I know QSVgRenderer exists, however, I'm not sure once I create the QSvgRenderer object where I go from there to make the svg a resizeable backround.

    Here's the test code I wrote:

    from PySide2 import QtCore, QtGui, QtWidgets

    class Ui_Form(object):
        def setupUi(self, Form):
            Form.setObjectName("Form")
            Form.resize(400, 300)
            self.horizontalLayout_2 = QtWidgets.QHBoxLayout(Form)
            self.horizontalLayout_2.setObjectName("horizontalLayout_2")
            self.horizontalLayout = QtWidgets.QHBoxLayout()
            self.horizontalLayout.setObjectName("horizontalLayout")
            self.horizontalLayout_2.addLayout(self.horizontalLayout)
            self.retranslateUi(Form)
            Form.setStyleSheet("""background-color: #202021;background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 0H0v36h36V0zM15.126 2H2v13.126c.367.094.714.24 1.032.428L15.554 3.032c-.188-.318-.334-.665-.428-1.032zM18 4.874V18H4.874c-.094-.367-.24-.714-.428-1.032L16.968 4.446c.318.188.665.334 1.032.428zM22.874 2h11.712L20 16.586V4.874c1.406-.362 2.512-1.468 2.874-2.874zm10.252 18H20v13.126c.367.094.714.24 1.032.428l12.522-12.522c-.188-.318-.334-.665-.428-1.032zM36 22.874V36H22.874c-.094-.367-.24-.714-.428-1.032l12.522-12.522c.318.188.665.334 1.032.428zm0-7.748V3.414L21.414 18h11.712c.362-1.406 1.468-2.512 2.874-2.874zm-18 18V21.414L3.414 36h11.712c.362-1.406 1.468-2.512 2.874-2.874zM4.874 20h11.712L2 34.586V22.874c1.406-.362 2.512-1.468 2.874-2.874z' fill='%23000000' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");""")
            QtCore.QMetaObject.connectSlotsByName(Form)
    
        def retranslateUi(self, Form):
            Form.setWindowTitle(QtWidgets.QApplication.translate("Form", "Form", None, -1))
    
    
    if __name__ == "__main__":
        import sys
        app = QtWidgets.QApplication(sys.argv)
        Form = QtWidgets.QWidget()
        ui = Ui_Form()
        ui.setupUi(Form)
        Form.show()
        sys.exit(app.exec_())
    
    raven-worxR 1 Reply Last reply
    0
    • R RaisinBread22

      I've generated the SVG css code through http://www.heropatterns.com/ and I'm trying to use it as the background for my main window/Qwidget. I want the background to resize as the window grows bigger or shrinks. I tried calling Form.setStyleSheet() withe the generated css being passed in as an argument, but I only get the one of the two colors in the pattern. What's the proper way to display a SVG as the backround? I know QSVgRenderer exists, however, I'm not sure once I create the QSvgRenderer object where I go from there to make the svg a resizeable backround.

      Here's the test code I wrote:

      from PySide2 import QtCore, QtGui, QtWidgets

      class Ui_Form(object):
          def setupUi(self, Form):
              Form.setObjectName("Form")
              Form.resize(400, 300)
              self.horizontalLayout_2 = QtWidgets.QHBoxLayout(Form)
              self.horizontalLayout_2.setObjectName("horizontalLayout_2")
              self.horizontalLayout = QtWidgets.QHBoxLayout()
              self.horizontalLayout.setObjectName("horizontalLayout")
              self.horizontalLayout_2.addLayout(self.horizontalLayout)
              self.retranslateUi(Form)
              Form.setStyleSheet("""background-color: #202021;background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 0H0v36h36V0zM15.126 2H2v13.126c.367.094.714.24 1.032.428L15.554 3.032c-.188-.318-.334-.665-.428-1.032zM18 4.874V18H4.874c-.094-.367-.24-.714-.428-1.032L16.968 4.446c.318.188.665.334 1.032.428zM22.874 2h11.712L20 16.586V4.874c1.406-.362 2.512-1.468 2.874-2.874zm10.252 18H20v13.126c.367.094.714.24 1.032.428l12.522-12.522c-.188-.318-.334-.665-.428-1.032zM36 22.874V36H22.874c-.094-.367-.24-.714-.428-1.032l12.522-12.522c.318.188.665.334 1.032.428zm0-7.748V3.414L21.414 18h11.712c.362-1.406 1.468-2.512 2.874-2.874zm-18 18V21.414L3.414 36h11.712c.362-1.406 1.468-2.512 2.874-2.874zM4.874 20h11.712L2 34.586V22.874c1.406-.362 2.512-1.468 2.874-2.874z' fill='%23000000' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");""")
              QtCore.QMetaObject.connectSlotsByName(Form)
      
          def retranslateUi(self, Form):
              Form.setWindowTitle(QtWidgets.QApplication.translate("Form", "Form", None, -1))
      
      
      if __name__ == "__main__":
          import sys
          app = QtWidgets.QApplication(sys.argv)
          Form = QtWidgets.QWidget()
          ui = Ui_Form()
          ui.setupUi(Form)
          Form.show()
          sys.exit(app.exec_())
      
      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by raven-worx
      #2

      @RaisinBread22
      use background-repeat: repeat; style declaration

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      2
      • R Offline
        R Offline
        RaisinBread22
        wrote on last edited by RaisinBread22
        #3

        @raven-worx I added the style declaration at the start of the stylesheet but I still get a solid color background, without the pattern visible. What gives?

        alt text

        Here's what it should look like for reference:
        alt text

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved