Angular:绑定到xlink:href不会更新IE11中的SVG
问题描述:
我有一个显示SVG的Angular 4应用程序。 SVG是动态的,取决于模型。这是通过伺机到use xlink:href
属性来实现的:Angular:绑定到xlink:href不会更新IE11中的SVG
<svg class="svg-icon">
<use [attr.xlink:href]="'./symbol-defs.svg#' + icon" />
</svg>
注意icon
是可变的,并且因此可以改变。发生这种情况时,应该更新SVG以反映这一点。
在Chrome,Firefox,Safari和Edge中一切正常,但在IE中,模型更改时不会更新SVG。这是一个Plunker说明问题。它适用于除IE(11)以外的所有浏览器。有关如何解决这个问题的任何想法?
答
您可以使用svg4everybody模块。 https://github.com/jonathantneal/svg4everybody
只是npm i --save svg4verybody
而且在未来AppModule.ts例如,你需要添加
import * as svg4verybody from 'svg4everybody/dist/svg4everybody';
...
ngOnInit() {svg4verybody();}
也许有多次使用的元素(每一个图标),然后改变其显示属性所以只有一个是可见的? –
https://css-tricks.com/svg-use-external-source/ –