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

题：

任何人都可以帮助我了解如何访问 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;
}

打字稿：你可以使用 Jquery

import $ from 'jquery';

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

编辑：

如下评论，您也可以document.getElementById("myId")在不导入 jquery 的情况下使用