如何使用帶有 svg 標簽的 svg 圖像

Question

您好我想知道是否可以在 html 的 svg 標記中使用我的 svg 圖像

我的形象.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} />

但我想要 < svg > 標簽用於申請 css

Answer 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>
  );
};