SVG appearing differently when used in component on multiple pages

@Tobyres wrote:

Hi

I’ve just started using ionic and I’m working on a school project, where I have to implement an app.
Searching the web, I’ve found, that my problem is probably caused by the shadow dom element, but i couldn’t figure it out, what it even is and does.

I have a default-button component, which I’m using on different pages:

<div class="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 199.256 70.68">
    <defs>
      <linearGradient id="linear-gradient" x1="0.155" y1="1.274" x2="0.577" y2="0.44" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#fec50a"/>
        <stop offset="0.649" stop-color="#ffefbd"/>
        <stop offset="1" stop-color="#fec50a"/>
      </linearGradient>
    </defs>
    <g id="button" transform="translate(-60.101 -784.645)">
      <path id="border" d="M118.877,67.68l15.509-14.61V14.61L118.877,0H62.887L53.941,11.406h58.327l9.756,9.855v26.15l-9.44,9.164H9.309L0,67.68Z" transform="translate(195.987 853.824) rotate(180)" stroke="#25283d" stroke-linecap="square" stroke-width="3" fill="url(#linear-gradient)"/>
      <g id="body" transform="translate(87 802.905)" fill="#25283d">
        <path d="M 144.7780303955078 33.09459686279297 L -0.43061363697052 33.09459686279297 L -6.668951511383057 26.72231674194336 L -6.668951511383057 6.99782133102417 L -0.4475290477275848 1.000006794929504 L 170.2852783203125 1.000006794929504 L 144.7780303955078 33.09459686279297 Z" stroke="none"/>
        <path d="M -0.0439910888671875 1.999992370605469 L -5.668960571289063 7.422794342041016 L -5.668960571289063 26.3143196105957 L -0.010162353515625 32.09461212158203 L 144.29541015625 32.09461212158203 L 168.213134765625 1.999992370605469 L -0.0439910888671875 1.999992370605469 M -0.8510589599609375 -7.62939453125e-06 L 172.3573455810547 -7.62939453125e-06 L 145.2606201171875 34.09461212158203 L -0.8510589599609375 34.09461212158203 L -7.668960571289063 27.13032531738281 L -7.668960571289063 6.572849273681641 L -0.8510589599609375 -7.62939453125e-06 Z" stroke="none" fill="#fec50a"/>
      </g>
      <text id="WEITER" transform="translate(126.627 826.65)" fill="#fff" font-size="19" font-family="Arial" font-weight="600" letter-spacing="0.05em"><tspan x="0" y="0">{{ text }}</tspan></text>
    </g>
  </svg>  
</div>

I have a shared module for my components:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { ForkComponent } from '../component/fork/fork.component';
import { DefaultButtonComponent } from '../component/default-button/default-button.component';
import { HeaderComponent } from '../component/header/header.component';
import { HeaderLogoComponent } from '../component/header-logo/header-logo.component';
import { TabviewComponent } from '../component/tabview/tabview.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule
  ],
  declarations: [
    ForkComponent,
    DefaultButtonComponent,
    HeaderComponent,
    HeaderLogoComponent,
    TabviewComponent
  ],
  exports: [
    ForkComponent,
    DefaultButtonComponent,
    HeaderComponent,
    HeaderLogoComponent,
    TabviewComponent
  ]
})
export class SharedModule { }

I have the default button in my login page:

<ion-header>
    <ion-toolbar>
      <app-header-logo></app-header-logo>
    </ion-toolbar>
  </ion-header>
  
  <ion-content>
    <div class="contentDiv">
      <app-default-button [text]="'WEITER'" (click)="change2Home()"></app-default-button>
    </div>
  </ion-content>

and in my home page:

<ion-header>
  <ion-toolbar>
    <app-header [title]="'HOME'" [subtitleActive]="false"></app-header>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
    <div class="contentDiv">
        <app-default-button [text]="'Training'"></app-default-button>
    </div>
</ion-content>

<ion-footer no-border class="transparentToolbar">
  <ion-toolbar>
    <app-tabview></app-tabview>
  </ion-toolbar>
</ion-footer>

In my login page it is displayed perfectly fine:

Screen Shot 2019-05-05 at 13.52.15.png640×1136 52 KB

But when I change to my home page the gradient just disappears:

Screen Shot 2019-05-05 at 13.53.25.png640×1136 36.1 KB

Thanks in advance for the help

P.S.:

You could even download the app from the playstore (name: flexstatics) in order to see the problem for yourself.
(On the starting page you have to click the logo in order to get to the next page, it’s just a prototype for now to find out if the problems happens on the device too )

The problem appears always in the same way: The SVG used in the component is correctly displayed on the first page but when changing to the next, where the same components is used again, the gradient will disappear.

Posts: 1

Participants: 1

Read full topic