1

I am trying using texture text in a project. What I'm trying to achieve is http://lea.verou.me/2012/05/text-masking-the-standards-way/

I've placed the svg and styles in a @Component:

Template:

<svg>
  <svg:defs>
    <svg:pattern [id]="idex" patternUnits="userSpaceOnUse" width="400" height="400" >
      <svg:image xlink:href="assets/images/banner.jpg" width="400" height="400" />
    </pattern>
  </defs>
  <text y="1.2em" [ngStyle]="styler">SVG rocks!</text>
</svg>

Constructor:

idex = 'wood' + Date.now();
ngAfterViewChecked() {
  this.styler = {
    "fill": `url('#${this.idex}')`
  };
}

The SVG is rendered on the screen, but unfortunately the text is transparent.

Now, if I remove the 'fill' styling the text is displayed in black is shown in full glory.

I am open to suggestion if anybody has a better / different approach to the problem.

Any help would be great. Also, as an extra, if somebody can help me out, how to wrap SVG text that would be very helpful.

Thanks in advance,

Shamim
  • 193
  • 2
  • 7
  • 1
    Is this your problem perhaps? http://stackoverflow.com/questions/19742805/angular-and-svg-filters – Paul LeBeau Sep 22 '16 at 15:17
  • @PaulLeBeau Thanks, this indeed was my issue. Can you please, post your comment as answer so that I can accept it. – Shamim Sep 23 '16 at 09:42

0 Answers0