如何在Sencha extjs6应用程序中将svg横幅放置在画布顶部

Question

要在我的Sencha ExtJs6应用程序顶部放置一个svg横幅图像。

使用下面的抄送，至少可以在登录窗口中实现，而在主面板本身中则不能。

顶部是svg-pnale

我是否需要使用ExtJs应用程序的另一个类元素，例如（.ext-element-1 .x-scroller .x-border-box x-panel .x-panel-navigation），还是必须使用在scaffholder的application.js中放置一个新项，哪个sencha生成应用程序执行该操作？

   .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%;}

`

横幅图像不应覆盖现有元素。在用户执行的每个操作中，它都应该是一个附加的固定元素。

欣赏任何提示。 预先非常感谢。

Answer 1

您可以尝试使用Ext.Img组件显示图像，尽管我不是100％地确定它支持SVG。

您还可以尝试在面板中将svg添加为HTML：

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