Angular2：如何在SVG中添加/更改CSS样式？

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

问题：

有人能帮我解决如何在TypeScript中访问svg和更改CSS样式的问题吗？

- Ng2-Fun

---

你已经在模板中有了<svg>，现在想要为该SVG添加CSS样式，还是想先添加<svg>标记，然后再修改CSS样式？具体的CSS是什么？ - msanford

我想将svg保留到单独的文件中，然后在模板中使用css来进行样式设置。不过，最终我放弃了svg并使用了字体图标，效果很好。 - Ng2-Fun

Answer 1

这里有两个问题： 首先，您没有使用内联svg，因此无法更改svg样式，例如元素的填充，正如使用嵌入的SVG的颜色更改所述。 这不是一个angular问题。

为了以实用的方式在angular中完成这个任务，我建议创建一个组件，该组件将完整的svg放在其html中：

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 属性并几乎创建一个库，否则我会反对它。

- zardilior

Answer 2

你可以直接在代码中插入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。

- Francesco Gusmeroli

---

为什么在Angular已经有自己的选择器引擎时还要导入并使用jQuery呢？ - msanford

好的，你也可以根据自己的喜好使用 document.getElementById("myId")。 - Francesco Gusmeroli

Answer 3

这个问题目前缺少重要的细节，但看起来像是另一个XY问题。你正在使用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]是基于任何求值为布尔值的内容进行分配的，因此它们也可以是函数。

选项3

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

模板：

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

将您的样式和条件分配与选项2相同。

这里有一份关于在angular 2+中使用SVG的有趣文档。

- msanford