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

Posts: 1

Participants: 1

Read full topic