Question

我正在尝试在项目中使用纹理文本。我想要实现的是http://lea.verou.me/2012/05/text-masking-the-standards-way/

我已将svg和样式放在@Component中：

模板：

<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>

构造

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

SVG在屏幕上呈现，但不幸的是文本是透明的。

现在，如果我删除'填充'样式，文本以黑色显示就会显示出来。

如果有人对问题采取更好/不同的方法，我愿意接受建议。

任何帮助都会很棒。此外，作为额外的，如果有人可以帮助我，如何包装SVG文本将是非常有帮助的。

提前致谢，

svg文本填充模式ID在angular2中不起作用

0 个答案: