我有以下代码将svg添加到angular2组件的模板:
<object type="image/svg+xml" data="kiwi.svg" class="logo">
Kiwi Logo
</object>
为了动态添加css样式,我尝试了几种获取内容的方法:
1)
public ngAfterViewInit(): void {
this.el = this._doc.getElementsByTagName('svg');
console.log(this.el);
}
导致控制台:[]
2)
public ngAfterViewInit(): void {
this.el = this._elementRef.nativeElement.querySelector('object');
console.log(this.el);
}
导致控制台:null
题:
任何人都可以帮助我如何访问svg以及如何在打字稿中更改css样式?
你可以直接在你的代码中插入qazxsw poi
HTML:
svg
CSS:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<g>
<path id="myId" d="..."/>
</g>
</svg>
typescript:你可以使用Jquery
#myId {
fill: red;
}
编辑:
如下所述,您也可以使用import $ from 'jquery';
this.el = $("#myId");
而不使用import jquery
这个问题目前缺乏重要的细节,但它看起来像另一个document.getElementById("myId")
。你在Angular模板中:不使用DOM方法获取元素并更改其样式,使用模板系统和属性绑定。
由于我不知道您想要具体添加什么CSS,以下是一些通用示例:
使用XY Problem绑定更改单个类。
模板:
[ngClass]
零件:
<object type="image/svg+xml"
data="kiwi.svg"
[ngClass]="kiwiClass">
Kiwi Logo
</object>
使用// Reassign this as needed
kiwiClass = "logo";
来调解(相对较小的)类列表的状态
模板:
[ngClass]
然后在样式表中,将所需的样式添加到<object type="image/svg+xml"
data="kiwi.svg"
class="logo"
[ngClass]="{'red': shouldBeRed, 'blue': checkShouldBeBlue()}">
Kiwi Logo
</object>
和.red
类,以及.blue
和shouldBeRed
条件。
shouldBeBlue
es是根据评估为布尔值的任何东西分配的,因此它们也可以是函数。
使用[ngClass]
来调解(相对较小的)类列表的状态
模板:
[class.className]
分配您的样式和条件与选项2相同。
这是一篇关于<object type="image/svg+xml"
data="kiwi.svg"
class="logo"
[class.red]="shouldBeRed"
[class.blue]="checkShouldBeBlue()">
Kiwi Logo
</object>
的有趣文件。