How to put a svg banner on top of canvas in Sencha extjs6 app

Question

In want to put a svg banner image on top of my Sencha ExtJs6 app.

With the ccs below, I could achieve this at least for the login window, but not for the main panel itself.

svg-pnale on top

Do I need to use another class element of ExtJs' app, like (.ext-element-1 .x-scroller .x-border-box x-panel .x-panel-navigation), or do I have to put an new item somewhere in application.js of the scaffolder, which sencha generate app does?

.x-border-box::before {
    background-image: url(../images/_horizontal.svg) !important;
    background-position: 0 -100px;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

The banner image should not override existing elements. It should be an fix additional element on top on every action the user does.

Appreciating any hints. Many thanks in advance.

Answer 1

You could try to use the Ext.Img component to display the image, although I'm not 100% sure it support SVG.

You could also try to add the svg as HTML in a panel :

  {
        title: 'My SVG',
        html: '<img src=./resources/images/1.svg />'
  }