如何使用带有 svg 标签的 svg 图像答案

【问题标题】：How to use svg image with svg tag如何使用带有 svg 标签的 svg 图像
【发布时间】：2020-05-16 19:30:14
【问题描述】：

您好，我想知道是否可以在 html 的 svg 标签中使用我的 svg 图片

我的 image.svg cde:

<svg viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<g>
  <path style="fill:#FCD3EE;" d="M44,18.394v21.141c0,2.722-2.207,4.929-4.929,4.929L22,44.535l-10,11v-11H4.929
    		C2.207,44.535,0,42.328,0,39.606l0-21.141c0-2.722,2.207-4.929,4.929-4.929l34.141-0.071C41.793,13.465,44,15.672,44,18.394z" />
  <path style="fill:#FFFFFF;" d="M22,24.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h13c0.553,0,1,0.448,1,1S22.553,24.465,22,24.465z" />
  <path style="fill:#FFFFFF;" d="M35,30.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,30.465,35,30.465z" />
  <path style="fill:#FFFFFF;" d="M35,36.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,36.465,35,36.465z" />
  <path style="fill:#8950FC;" d="M53.071,2.535l-34.141-0.07C16.207,2.465,14,4.672,14,7.394v6.122l25.071-0.052
    		c2.722,0,4.929,2.207,4.929,4.93v18.441l7,7.7v-11h2.071c2.722,0,4.929-2.207,4.929-4.929V7.465
    		C58,4.742,55.793,2.535,53.071,2.535z" />
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

我目前正在将它用作图像，但我需要将 css 应用到我的 svg 并且我不知道如何将其添加为 svg 标签

我在 reactjs 上使用标签图像：

<img src={Chat} />

但我想要

【问题讨论】：

标签： css svg

【解决方案1】：

有多种方法可以做到这一点，最简单的一种（无需任何配置）就是把它变成一个 React 组件：

import React from 'react';

export default () => {
  return (
    <svg viewBox="0 0 58 58" style={{'enable-background': 'new 0 0 58 58'}}>
      <g>
        <path style={{fill: '#FCD3EE'}} d="M44,18.394v21.141c0,2.722-2.207,4.929-4.929,4.929L22,44.535l-10,11v-11H4.929
        C2.207,44.535,0,42.328,0,39.606l0-21.141c0-2.722,2.207-4.929,4.929-4.929l34.141-0.071C41.793,13.465,44,15.672,44,18.394z"/>
        <path style={{fill: '#FFFFFF'}}
              d="M22,24.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h13c0.553,0,1,0.448,1,1S22.553,24.465,22,24.465z"/>
        <path style={{fill: '#FFFFFF'}}
              d="M35,30.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,30.465,35,30.465z"/>
        <path style={{fill: '#FFFFFF'}}
              d="M35,36.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,36.465,35,36.465z"/>
        <path style={{fill: '#8950FC'}} d="M53.071,2.535l-34.141-0.07C16.207,2.465,14,4.672,14,7.394v6.122l25.071-0.052
        c2.722,0,4.929,2.207,4.929,4.93v18.441l7,7.7v-11h2.071c2.722,0,4.929-2.207,4.929-4.929V7.465
        C58,4.742,55.793,2.535,53.071,2.535z"/>
      </g>
    </svg>
  );
};

【讨论】：