选项1

Question

我有以下代码将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样式吗？

Answer 1

您可以直接在svg

代码中插入

<强> HTML ：

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

<强> CSS ：

#myId {
  fill: red;
}

typescript ：您可以使用Jquery

import $ from 'jquery';

this.el = $("#myId");

修改

如下所述，您也可以使用document.getElementById("myId")而无需导入jquery

Answer 2

这个问题目前缺乏重要细节，但它看起来像另一个XY Problem。你在Angular模板中：不使用DOM方法获取元素并更改其样式，使用模板系统和属性绑定。

由于我不知道你想要具体添加什么CSS，这里有一些通用的例子：

选项1

使用[ngClass]绑定更改单个类。

模板：

<object type="image/svg+xml"
        data="kiwi.svg"
        [ngClass]="kiwiClass">
  Kiwi Logo
</object>

组件：

// Reassign this as needed
kiwiClass = "logo";

选项2

使用[ngClass]来调解（相对较小的）班级列表的状态

模板：

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [ngClass]="{'red': shouldBeRed, 'blue': checkShouldBeBlue()}">
  Kiwi Logo
</object>

然后在样式表中，将所需的样式添加到.red和.blue类以及shouldBeRed和shouldBeBlue条件。

[ngClass] es是根据评估为布尔值的任何内容分配的，因此它们也可以是函数。

选项3

使用[class.className]来调解（相对较小的）班级列表的状态

模板：

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [class.red]="shouldBeRed"
        [class.blue]="checkShouldBeBlue()">
  Kiwi Logo
</object>

指定样式和条件与选项2相同。

这是一篇关于using SVG with angular 2+的有趣文件。

Answer 3

这里有两个问题：首先，您未使用内嵌svg，因此如此处所述 Changing color of SVG which was embedded using <object>，因此您将无法更改svg样式，例如元素的填充。这不是一个角度问题。

要以实用的方式在角度上做到这一点，我建议创建一个在其html上具有完整svg的组件：

svg-component.html

<!-- svg-component.html, where we bind some properties of the svg-->
<svg.... [style.fill]="color"/></svg>

svg-component.ts，

// svg-component.ts, where we  map to inputs these properties for easy 
import { Component, OnInit, Input } from '@angular/core';

@Component({
 ...
})
export class SvgComponent implements OnInit {
  @Input color = '#fff'; 
  ...
}

用法：

<svg-component color="#000"></svg-component>

。

另一个想法是尝试复制图标库的方法并创建字体，但是除非它的集合很大并且您要使用字体css属性并几乎创建一个库，否则我会投票反对。

Angular2：如何在svg中添加/更改css样式？

3 个答案:

选项1

选项2

选项3