Angular 5中如何将SVG文件导入组件？能否使用Angular-CLI？

当然可以用Angular CLI实现导入def.svg的需求！我来给你一步步拆解操作步骤，同时也会分享Angular 5里其他可行的方法~

使用Angular CLI导入的具体步骤 #

1. 放置SVG文件 #

把你的def.svg放到项目的src/assets目录下（如果需要分类管理，也可以新建src/assets/svg子目录，把文件放进去）。Angular CLI默认会将assets目录下的资源打包到构建产物中，确保文件能被正常访问。

2. 引入并使用defs #

根据你的使用场景，有两种引入方式：

• 全局引入（适合多组件复用）
  在项目根目录的src/index.html中添加一个隐藏的SVG元素，加载def.svg里的defs：

  <svg style="display: none; aria-hidden: true;">
    <use xlink:href="/assets/svg/def.svg#你的定义ID"></use>
  </svg>
  

  这里的你的定义ID需要替换成def.svg中<defs>里具体元素的ID，比如如果defs里有<clipPath id="carousel-clip">...</clipPath>，就写#carousel-clip。

• 组件内引入（仅当前组件使用）
  在目标组件的模板文件（比如xxx.component.html）中先加载defs，再引用：

  <!-- 隐藏加载defs -->
  <svg style="display: none; aria-hidden: true;">
    <use xlink:href="/assets/def.svg#carousel-clip"></use>
  </svg>
  <!-- 业务中引用defs里的元素 -->
  <svg class="your-custom-svg">
    <use xlink:href="#carousel-clip"></use>
  </svg>
  

3. 验证资源配置（可选） #

确保.angular-cli.json（Angular 5的配置文件）的apps[0].assets数组包含你的SVG所在目录，默认已经包含"assets"，如果是子目录可以补充进去：

"apps": [
  {
    "assets": [
      "assets",
      "assets/svg" // 如果放在这个子目录就添加
    ],
    // 其他配置项...
  }
]

Angular 5中其他可行方法 #

1. 直接内联到组件模板 #

如果这个defs只在单个组件使用，或者不需要复用文件，可以直接把def.svg里的<defs>...</defs>内容复制到组件模板中：

<svg style="display: none; aria-hidden: true;">
  <defs>
    <!-- 粘贴def.svg里的defs内容 -->
    .....
  </defs>
</svg>
<!-- 引用defs元素 -->
<svg>
  <use xlink:href="#carousel-clip"></use>
</svg>

这种方式无需处理静态资源，适合简单场景。

2. 通过HttpClient动态加载 #

可以利用Angular的HttpClient获取SVG内容，然后动态插入到DOM中：

• 首先在组件中注入HttpClient：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements OnInit {
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/assets/def.svg', { responseType: 'text' })
      .subscribe(svgContent => {
        const hiddenContainer = document.createElement('div');
        hiddenContainer.innerHTML = svgContent;
        hiddenContainer.style.display = 'none';
        document.body.appendChild(hiddenContainer);
      });
  }
}

加载完成后，defs里的元素就能在应用中被全局引用了。

内容的提问来源于stack exchange，提问作者Jeyabalan Thavamani