【问题标题】：Angular2: how to add/change css style in svg?Angular2：如何在 svg 中添加/更改 CSS 样式？
【发布时间】：2017-03-31 07:17:31
【问题描述】：

我有以下代码可以将 svg 添加到 angular2 组件的模板中：

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo
</object>

为了动态添加css样式，我尝试了几种获取内容的方法：

public ngAfterViewInit(): void {
        this.el = this._doc.getElementsByTagName('svg');
        console.log(this.el);
    }

控制台中的结果：[]

public ngAfterViewInit(): void {
  this.el = this._elementRef.nativeElement.querySelector('object');
  console.log(this.el);
}

控制台结果：null

问题：

谁能帮助我了解如何访问 svg 以及如何在 typescript 中更改 css 样式？

【问题讨论】：

您已经在模板中拥有<svg> 并且您正在尝试将CSS 添加到该svg，或者您正在尝试添加<svg> 然后在之后更改CSS？ CSS 到底是什么？
我想将 svg 保存到一个单独的文件中，然后在模板中使用 css 对其进行样式设置。不管怎样，我放弃了 svg 并使用了字体图标，效果很好。

标签： angular typescript dom svg angular2-template

【解决方案1】：

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

要以实用的方式在 Angular 中执行此操作，我建议创建一个在其 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 属性并且几乎创建一个库我会投反对票。

【讨论】：

【解决方案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;
}

打字稿：你可以使用 Jquery

import $ from 'jquery';

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

编辑：

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

【讨论】：

Angular有自己的选择器引擎，为什么还要导入和使用jQuery？
好的，你也可以用document.getElementById("myId") 随意

【解决方案3】：

这个问题目前缺少重要的细节，但它看起来像另一个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+ 上的一个有趣文档。

【讨论】：