使用 Photoshop 和 Illustrator 创建的 SVG

问题描述 投票:0回答:1

我正在使用 ReactJS 进行项目。 我使用 Photoshop (png) 创建了一个 SVG,后来使用 Illustrator 将其转换为 SVG。 这个 SVG 有 16 种颜色(在代码中),但我只看到 3 种:白色(背景)、cian 和黑色。

第一个问题:我不想要背景。

后来:我路过的时候想改变颜色。

错误出现在 SVG 的样式中。我尝试过以不同的方式导入它,但我无法改变颜色。

这是SVG的代码。也许导出不正确?谢谢你。

<svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 575.94 517.28"><defs><style>.cls-1{fill:#fefefe;}.cls-2{fill:#84d2db;}.cls-3{fill:#85d3db;}.cls-4{fill:#51462d;}.cls-5{fill:#020304;}.cls-6{fill:#020303;}
    .cls-7{fill:#83d2db;}.cls-8{fill:#83d1da;}.cls-9{fill:#090d0d;}.cls-10{fill:#101616;}.cls-11{fill:#101617;}.cls-12{fill:#141c1d;}.cls-13{fill:#131b1c;}.cls-14{fill:#030404;}.cls-15{fill:#030505;}.cls-16{fill:#040606;}.cls-17{fill:#040506;}</style></defs>
    <g  id="Capa_2"  data-name="Capa 2"><g  id="Capa_1-2"  data-name="Capa 1"><path  class="cls-1"  d="M0,0H575.94V517.28H0ZM102,22.8c-10.37-.
    09-19,3.69-25.69,11.67a30.09,30.09,0,0,0-7.29,19.69q-.07,96.26,0,192.52a61.31,61.31,0,0,0,.36,7.43,30.87,30.87,0,0,0,11.13,20.33C87,279.94,94.77,282,103.06,282q76.33.09,152.67,0c3.13,0,2.79-.37,2.79,2.7V440.49c0,.71,0,1.42,0,2.13-.65,0-1.3.05-1.95.05q-58.29,0-116.58,0a72.5,72.5,0,0,0-16.44,1.91A192.2,192.2,0,0,0,78.8,460.81c-7.62,3.91-14.9,8.5-22.34,12.79a4.82,4.82,0,0,0-1,.25c-11.1,5.33-22.09,10.85-31.58,18.84-2.7,2.28-5.31,4.73-6.8,8.09-1.23,2.8-.69,4.63,2.22,5.5a27.55,27.55,0,0,0,7.78,1.29q247.58.09,495.15,0a29,29,0,0,0,6.31-.68c3.81-.85,5.25-3.11,4-6a9.53,9.53,0,0,0-1.71-2.66c-1.95-2.11-4-4.12-6-6.18.71,0,1.42-.06,2.12-.06l27-.05a31.56,31.56,0,0,0,4.36-.43c4-.
    92,5.28-3.61,3.2-7.05-1.25-2.07-3.12-3.77-4.71-5.64-4-3.05-7.86-6.41-12.12-9.09a206,206,0,0,0-54-23.48,95.85,95.85,0,0,0-26.57-3.72c-47.34.15-94.67.07-142,.07H320v-1.3q0-79,0-158.07c0-.42,0-.
    83,0-1.24l2.31,0q62.08,0,124.18,0c7,0,13.64-1.65,19.47-5.83,3.66-2.62,6.92-5.59,9-9.64,2.12-.13,4.26-.15,6.37-.
    41a32,32,0,0,0,27.72-31.34q0-98,0-195.9a28.43,28.43,0,0,0-2.59-12.34c-5.88-12.37-15.59-19.37-29.46-19.38Q302.89,7,128.72,7.15a29.24,29.24,0,0,0-7,.95C113.16,10.23,106.75,15.4,102,22.8Z"/><path  d="M320,282.06c0,.41,0,.82,0,1.24q0,79,0,158.07v1.3H322c47.34,0,94.67.08,142-.07a95.85,95.85,0,0,1,26.57,3.72,206,206,0,0,1,54,23.48c4.26,2.68,8.09,6,12.12,9.09a4.07,4.07,0,0,0,.63,1.38,16.3,16.3,0,0,1,3.67,6.45,1.75,1.75,0,0,1,0,1.17c-.7,1.64-3.68,3.28-5.47,3.25-.54,0-1.09.56-1.63.87l-27,.05c-.7,0-1.41,0-2.12.06s-1.66-.06-2.48-.
    06H56.76a34.66,34.66,0,0,1-4.08-.05,23.79,23.79,0,0,1-4.83-1c-2.77-.95-3.73-3-2.47-5.57A19.92,19.92,0,0,1,49,480.26c2.33-2.38,5-4.46,7.46-6.66,7.44-4.29,14.72-8.88,22.34-12.79a192.2,192.2,0,0,1,44.72-16.26A72.5,72.5,0,0,1,140,442.64q58.29.09,116.58,0c.65,0,1.3,0,1.95-.05h28.64V266.45h-2.26q-77,0-153.92,0a38.26,38.26,0,0,1-7.93-.
    74,32.06,32.06,0,0,1-25.26-30.79q0-96.63-.05-193.26c0-6.7,1.07-13,4.33-18.83,4.71-7.4,11.12-12.57,19.73-14.7a29.24,29.24,0,0,1,7-.95q174.18-.08,348.35,0c13.87,0,23.58,7,29.46,19.38a28.43,28.43,0,0,1,2.59,12.34q0,98,0,195.9a32,32,0,0,1-27.72,31.34c-2.11.26-4.25.28-6.37.41-.53,0-1.06-.06-1.6-.06H320Zm160-29.53c.52-.08,1-.15,1.55-.24a17.65,17.65,0,0,0,14.78-17.43V34a17.91,17.91,0,0,0-10.82-16.24c-4-1.72-8.2-1.41-12.37-1.41q-172.3,0-344.61,0a17.1,17.1,0,0,0-13.78,6.39,16.42,16.42,0,0,0-4.16,11.14q0,100.44,0,200.88a17.68,17.68,0,0,0,17.85,17.86H477.84C478.55,252.61,479.26,252.56,480,252.53Z"/>
    <path  class="cls-2"  d="M102,22.8c-3.26,5.86-4.34,12.13-4.33,18.83q.15,96.63.05,193.26A32.06,32.06,0,0,0,123,265.68a38.26,38.26,0,0,0,7.93.74q77,.07,153.92,0h2.26V442.62H258.49c0-.71,0-1.42,0-2.13V284.73c0-3.07.34-2.7-2.79-2.7q-76.33,0-152.67,0c-8.29,0-16.06-2.05-22.52-7.55a30.87,30.87,0,0,1-11.13-20.33,61.31,61.31,0,0,1-.36-7.43q0-96.26,0-192.52a30.09,30.09,0,0,1,7.29-19.69C83,26.49,91.67,22.71,102,22.8Z"/><path  class="cls-3"  
    d="M56.46,473.6c-2.5,2.2-5.13,4.28-7.46,6.66a19.92,19.92,0,0,0-3.62,5.19c-1.26,2.61-.3,4.62,2.47,5.57a23.79,23.79,0,0,0,4.83,1,34.66,34.66,0,0,0,4.08.05H522.31c.82,0,1.65,0,2.48.06,2,2.06,4.07,4.07,6,6.18a9.53,9.53,0,0,1,1.71,2.66c1.26,2.84-.18,5.1-4,6a29,29,0,0,1-6.31.68q-247.58.06-495.15,0a27.55,27.55,0,0,1-7.78-1.29c-2.91-.87-3.45-2.7-2.22-5.5,1.49-3.36,4.1-5.81,6.8-8.09,9.49-8,20.48-13.51,31.58-18.84A4.82,4.82,0,0,1,56.46,473.6Z"/>
    <path  class="cls-3"  d="M320,282.06V266.45h153.4c.54,0,1.07,0,1.6.06-2.12,4.05-5.38,7-9,9.64-5.83,4.18-12.47,5.82-19.47,5.83q-62.08.11-124.18,0Z"/><path  class="cls-4"  d="M553.89,492c.54-.31,1.09-.88,1.63-.87,1.79,0,4.77-1.61,5.47-3.25a1.75,1.75,0,0,0,0-1.17,16.3,16.3,0,0,0-3.67-6.45,4.07,4.07,0,0,1-.63-1.38c1.59,1.87,3.46,3.57,4.71,5.64,2.08,3.44.77,6.13-3.2,7.05A31.56,31.56,0,0,1,553.89,492Z"/>
    <path  class="cls-2"  d="M480,252.53c-.71,0-1.42.08-2.13.08H128.41a17.68,17.68,0,0,1-17.85-17.86q0-100.44,0-200.88a16.39,16.39,0,0,1,4.17-11.14c.88,0,1.77.07,2.66.07H446a56.36,56.36,0,0,1,6.36.36,30.77,30.77,0,0,1,17.36,8.09c7.43,6.77,10.47,15.49,10.49,25.23q.12,90,0,179.9C480.23,241.77,480.06,247.15,480,252.53ZM288.32,136.43q0-39.17,0-78.32A26,26,0,0,0,262.18,32q-54.74,0-109.47,0A26,26,0,0,0,126.58,58.1q0,78.33,0,156.64a26,26,0,0,0,26.13,26.12q54.73,0,109.47,0a24.5,24.5,0,0,0,5.27-.
    55c12.68-2.84,20.86-13.08,20.86-26.08Q288.33,175.32,288.32,136.43Zm177.41-1h0q0-38.72,0-77.43a26,26,0,0,0-25.91-26q-45.85-.08-91.71,0a26,26,0,0,0-26,25.92q-.06,77.25,0,154.52a26,26,0,0,0,25.95,25.92q45.85.07,91.71,0a26.13,26.13,0,0,0,26-26.21Q465.75,173.76,465.73,135.4Z"/><path  class="cls-1"  d="M480,252.53c.09-5.38.26-10.76.26-16.14q0-89.94,0-179.9c0-9.74-3.06-18.46-10.49-25.23a30.77,30.77,0,0,0-17.36-8.09,56.36,56.36,0,0,0-6.36-.36H117.39c-.89,0-1.78,0-2.66-.
    07a17.07,17.07,0,0,1,13.77-6.39q172.31,0,344.61,0c4.17,0,8.36-.31,12.37,1.41A17.91,17.91,0,0,1,496.3,34V234.86a17.65,17.65,0,0,1-14.78,17.43C481,252.38,480.49,252.45,480,252.53Z"/><path  class="cls-5"  
    d="M288.32,136.43q0,38.9,0,77.78c0,13-8.18,23.24-20.86,26.08a24.5,24.5,0,0,1-5.27.55q-54.74,0-109.47,0a26,26,0,0,1-26.13-26.12q0-78.31,0-156.64A26,26,0,0,1,152.71,32q54.73,0,109.47,0A26,26,0,0,1,288.3,58.11Q288.36,97.26,288.32,136.43Zm-159.58-.12q0,38.63,0,77.25a27.49,27.49,0,0,0,.51,5.81c2.58,11.84,11.93,19.33,24.12,19.33q54,0,108.06,0a25.25,25.25,0,0,0,5.28-.48c11.83-2.55,19.41-12,19.42-24.06q0-77.7,0-155.4a25.27,25.27,0,0,0-.51-5.28C283,41.63,273.7,34.16,261.49,34.15q-54,0-108,0a27,27,0,0,0-7,.
    89C135.64,38,128.75,47.25,128.74,58.7Q128.71,97.51,128.74,136.31Z"/>
    <path  class="cls-6"  d="M465.73,135.4q0,38.37,0,76.73a26.13,26.13,0,0,1-26,26.21q-45.86.09-91.71,0a26,26,0,0,1-25.95-25.92q-.06-77.26,0-154.52a26,26,0,0,1,26-25.92q45.85-.08,91.71,0A26,26,0,0,1,465.7,58q.07,38.72,0,77.43ZM324.27,135q0,38.08,0,76.18a27.27,27.27,0,0,0,.49,5.64c2.55,11.89,11.94,19.39,24.25,19.4q44.87,0,89.74,0a25.52,25.52,0,0,0,5.46-.51c11.84-2.62,19.28-11.92,19.28-24.14q0-76.45,0-152.91a24.91,24.91,0,0,0-.49-5.1c-2.58-11.9-11.94-19.38-24.26-19.39q-44.87,0-89.74,0a27.59,27.59,0,0,0-7,.
    87c-10.78,2.86-17.75,12.17-17.76,23.58Q324.24,96.82,324.27,135Z"/>
    <path  class="cls-7"  d="M128.74,136.31q0-38.81,0-77.61c0-11.45,6.9-20.7,17.71-23.63a27,27,0,0,1,7-.89q54-.09,108.05,0c12.21,0,21.53,7.48,24.13,19.32a25.27,25.27,0,0,1,.51,5.28q0,77.7,0,155.4c0,12.1-7.59,21.51-19.42,24.06a25.25,25.25,0,0,1-5.28.48q-54,0-108.06,0c-12.19,0-21.54-7.49-24.12-19.33a27.49,27.49,0,0,1-.51-5.81Q128.7,174.94,128.74,136.31ZM252.59,85.23c.27-1.86-1.05-1.37-1.79-1.38q-47.19,0-94.37,0h-10.1c-.
    16,2,1.17,1.37,1.91,1.37q51.27,0,102.55,0ZM145.83,74.83c1.14.06,1.66.11,2.17.11H250.86a2.58,2.58,0,0,0,.88,0,4.62,4.62,0,0,0,.85-.64c-.26-.24-.48-.57-.79-.68a3.06,3.06,0,0,0-1.05,0H148.43a3.35,3.35,0,0,0-1.23,0C146.81,73.77,146.53,74.18,145.83,74.83ZM252.76,95l-.33-.46H148.18a2.34,2.34,0,0,0-.88,0,5.46,5.46,0,0,0-.94.74,1.86,1.86,0,0,0,1.93.61H250.44a4.41,4.41,0,0,0,1.41,0C252.21,95.73,252.46,95.29,252.76,95ZM146.41,63.5l.27.76h1.92q51,0,102,0a4.43,4.43,0,0,0,2-.55c-.11-1.47-1.33-.78-2-.78q-43.52-.06-87,0c-5.09,0-10.18,0-15.27,0A6.49,6.49,0,0,0,146.41,63.5Z"/>
    <path  class="cls-8"  d="M324.27,135q0-38.19,0-76.37c0-11.41,7-20.72,17.76-23.58a27.59,27.59,0,0,1,7-.87q44.86-.09,89.74,0c12.32,0,21.68,7.49,24.26,19.39a24.91,24.91,0,0,1,.49,5.1q0,76.46,0,152.91c0,12.22-7.44,21.52-19.28,24.14a25.52,25.52,0,0,1-5.46.51q-44.86,0-89.74,0c-12.31,0-21.7-7.51-24.25-19.4a27.27,27.27,0,0,1-.49-5.64Q324.25,173.09,324.27,135Zm107,11.07c-1.15-.13-2.31-.31-3.47-.37-.19,0-.41.45-.62.69-2.34-.24-4.66-.67-7-.69-9.57-.08-19.15-.13-28.72,0-11,.13-21.92.46-32.88.7-.11-1.39-1.17-.7-1.72-.65A25.22,25.22,0,0,0,333.47,171q0,11.44,0,22.9a25.2,25.2,0,0,0,25.19,25.29q34.2.08,68.41,0a25.22,25.22,0,0,0,25.16-25.32c0-7.57.06-15.15,0-22.72a56.24,56.24,0,0,0-.75-6.31Q447.09,149.29,431.24,146.07ZM395.05,49.72q-17,0-33.95,0a25.24,25.24,0,0,0-25.5,25.52q0,15.54,0,31.08a25.24,25.24,0,0,0,25.55,25.49q33.86,0,67.71,0a25.25,25.25,0,0,0,25.5-25.35q0-15.72,0-31.44a24.09,24.09,0,0,0-.52-5.09c-2.75-12.31-12.71-20.21-25.36-20.21Z"/>
    <path  class="cls-9"  d="M252.59,85.23h-1.8q-51.27,0-102.55,0c-.74,0-2.07.61-1.91-1.37h10.1q47.17,0,94.37,0C251.54,83.86,252.86,83.37,252.59,85.23Z"/>
    <path  class="cls-10"  d="M145.83,74.83c.7-.65,1-1.06,1.37-1.23a3.35,3.35,0,0,1,1.23,0H250.75a3.06,3.06,0,0,1,1.05,0c.31.11.53.44.79.68a4.62,4.62,0,0,1-.85.64,2.58,2.58,0,0,1-.88,0H148C147.49,74.94,147,74.89,145.83,74.83Z"/>
    <path  class="cls-11"  d="M252.76,95c-.3.3-.55.74-.91.87a4.41,4.41,0,0,1-1.41,0H148.29a1.86,1.86,0,0,1-1.93-.61,5.46,5.46,0,0,1,.94-.74,2.34,2.34,0,0,1,.88,0H252.43Z"/><path  class="cls-9"  d="M146.41,63.5a6.49,6.49,0,0,1,1.84-.6c5.09,0,10.18,0,15.27,0q43.51,0,87,0c.72,0,1.94-.69,2,.78a4.43,4.43,0,0,1-2,.55q-51,0-102,0h-1.92Z"/><path  class="cls-7"  d="M358.55,146.39c11-.24,21.92-.57,32.88-.7,9.57-.12,19.15-.07,28.72,0,2.34,0,4.66.45,7,.69l4.09.28a25,25,0,0,1,13.93,7.71,27.58,27.58,0,0,1,5.9,11c.14,3.66.36,7.32.4,11,.07,5.68,0,11.37,0,17a37.06,37.06,0,0,1-.35,4.94c-1.52,10.74-12.07,20.05-22.92,20.08q-34.92.08-69.86,0a25.43,25.43,0,0,1-3.69-.33,24.33,24.33,0,0,1-20.46-23.47q-.07-12.17,0-24.33A24.36,24.36,0,0,1,358.55,146.39Zm65.37,17.81a14.07,14.07,0,0,0-3.39,1,44.62,44.62,0,0,0-5.84,4.18c-5.14,4.41-10.33,8.78-15.21,13.46-5.08,4.87-9.89,10-14.69,15.17-1.05,1.13-2.42,2.53-1.18,4.74A20,20,0,0,0,387,201.6a25.72,25.72,0,0,0,4.36-2.92c5.72-4.88,11.55-9.66,17-14.82,4.87-4.6,9.35-9.62,13.89-14.56C423.39,168.05,424.55,166.58,423.92,164.2Zm-42.44,40.42a3.69,3.69,0,0,0-3.67-3.9c-1.76-.15-2.86.74-3.89,2-1.67,2-3.13,2.25-5.37.89a10.44,10.44,0,0,1-1.43-1c-.62-.53-1.16-1.32-2.07-.45a1.67,1.67,0,0,0-.1,2.63c2.5,2.82,5.45,4.83,9.34,5.18S381.48,207.91,381.48,204.62Z"/>
    <path  class="cls-12"  d="M395.05,49.72h33.41c12.65,0,22.61,7.9,25.36,20.21a24.09,24.09,0,0,1,.52,5.09q.07,15.72,0,31.44a25.25,25.25,0,0,1-25.5,25.35q-33.86,0-67.71,0a25.24,25.24,0,0,1-25.55-25.49q0-15.54,0-31.08a25.24,25.24,0,0,1,25.5-25.52Q378.08,49.7,395.05,49.72Zm0,.72H361.61a28,28,0,0,0-3.55.08,24.71,24.71,0,0,0-21.78,24.75c.16,10.3,0,20.61.05,30.91a35.48,35.48,0,0,0,.37,4.94c1.57,10.64,12.1,19.92,22.86,19.95,23.58.06,47.16,0,70.74,0a12.23,12.23,0,0,0,1.6-.06,24.73,24.73,0,0,0,21.78-24.76c-.17-10.35,0-20.72,0-31.08a23.23,23.23,0,0,0-.08-3A24.73,24.73,0,0,0,428.8,50.4C417.54,50.57,406.28,50.44,395,50.44Z"/>
    <path  class="cls-13"  d="M358.55,146.39a24.36,24.36,0,0,0-24.35,24q-.09,12.17,0,24.33a24.33,24.33,0,0,0,20.46,23.47,25.43,25.43,0,0,0,3.69.33q34.93,0,69.86,0c10.85,0,21.4-9.34,22.92-20.08a37.06,37.06,0,0,0,.35-4.94c0-5.68.06-11.37,0-17,0-3.66-.26-7.32-.4-11l.38-.57a56.24,56.24,0,0,1,.75,6.31c.09,7.57.05,15.15,0,22.72a25.22,25.22,0,0,1-25.16,25.32q-34.2.08-68.41,0a25.2,25.2,0,0,1-25.19-25.29q0-11.44,0-22.9a25.22,25.22,0,0,1,23.36-25.27C357.38,145.69,358.44,145,358.55,146.39Z"/><path  class="cls-12"  d="M451.45,164.85l-.38.57a27.58,27.58,0,0,0-5.9-11,25,25,0,0,0-13.93-7.71v-.6Q447.08,149.3,451.45,164.85Z"/>
    <path  class="cls-13"  d="M431.24,146.07v.6l-4.09-.28c.21-.24.43-.7.62-.69C428.93,145.76,430.09,145.94,431.24,146.07Z"/><path  class="cls-14"  d="M423.92,164.2c.63,2.38-.53,3.85-1.67,5.1-4.54,4.94-9,10-13.89,14.56-5.45,5.16-11.28,9.94-17,14.82A25.72,25.72,0,0,1,387,201.6a20,20,0,0,1-3.39,1.19c-1.24-2.21.13-3.61,1.18-4.74,4.8-5.15,9.61-10.3,14.69-15.17,4.88-4.68,10.07-9,15.21-13.46a44.62,44.62,0,0,1,5.84-4.18A14.07,14.07,0,0,1,423.92,164.2Z"/>
    <path  class="cls-5"  d="M381.48,204.62c0,3.29-3.23,5.66-7.19,5.3s-6.84-2.36-9.34-5.18a1.67,1.67,0,0,1,.1-2.63c.91-.87,1.45-.08,2.07.45a10.44,10.44,0,0,0,1.43,1c2.24,1.36,3.7,1.13,5.37-.89,1-1.25,2.13-2.14,3.89-2A3.69,3.69,0,0,1,381.48,204.62Z"/>
    <path  class="cls-7"  d="M395,50.44c11.25,0,22.51.13,33.77,0a24.73,24.73,0,0,1,24.76,21.78,23.23,23.23,0,0,1,.08,3c0,10.36-.13,20.73,0,31.08A24.73,24.73,0,0,1,431.9,131a12.23,12.23,0,0,1-1.6.06c-23.58,0-47.16,0-70.74,0-10.76,0-21.29-9.31-22.86-19.95a35.48,35.48,0,0,1-.37-4.94c0-10.3.11-20.61-.05-30.91a24.71,24.71,0,0,1,21.78-24.75,28,28,0,0,1,3.55-.08Zm8.6,18.13a10.6,10.6,0,0,1-1.53,0c-1.77-.3-2.61.4-3.31,2.12-3.27,8-6.74,16-10.12,24-1.9,4.49-3.77,9-5.69,13.58a9.54,9.54,0,0,1,1.19.06c2,.35,3-.42,3.75-2.35,2.29-5.85,4.83-11.61,7.27-17.4C398,82,400.75,75.42,403.63,68.57ZM356.84,89.71l16.35,13.6,2.51-2.65-13.26-11q6.85-5.61,13.08-10.74l-2.31-2.83Zm57.64,13.58,16.35-13.58-16-13.27L412,78.79l13.24,11L412,100.64Z"/><path  class="cls-15"  d="M403.63,68.57c-2.88,6.85-5.66,13.44-8.44,20-2.44,5.79-5,11.55-7.27,17.4-.76,1.93-1.77,2.7-3.75,2.35a9.54,9.54,0,0,0-1.19-.06c1.92-4.6,3.79-9.09,5.69-13.58,3.38-8,6.85-16,10.12-24,.7-1.72,1.54-2.42,3.31-2.12A10.6,10.6,0,0,0,403.63,68.57Z"/>
    <path  class="cls-16"  d="M356.84,89.71l16.37-13.63,2.31,2.83Q369.3,84,362.44,89.65l13.26,11-2.51,2.65Z"/>
    <path  class="cls-17"  d="M414.48,103.29,412,100.64l13.23-10.88L412,78.79l2.85-2.35,16,13.27Z"/></g></g></svg>

1。我尝试使用 HTML 导入 SVG“

<svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 575.94 517.28"><defs><style>.cls-1{fill:#fefefe;}. ... 

”,结果是样式中的错误。显示预期的 } (并在所有颜色中为 : 划上红色下划线

.cls-1{fill:#fefefe;} 

2.我尝试导入SVG并在SVG中添加类名(我也尝试使用标签img),然后更改CSS中的样式。

import React from 'react';
import Icon  from '/public/img/icon/icon1.svg';
import './styles.css';

const Project = () => {
  return (
    <div>
     <img src={Icon} alt="icon" className="icon1" />
    </div>
  );
};

export default Project;

在 CSS 中:

.icon {
 fill:  #f8c14a;}

css reactjs svg adobe-illustrator
1个回答
0
投票

如果 css 中的代码不起作用,您应该手动尝试在路径标记中添加 fill 属性,就像这样。 以前的代码:

<g  id="Capa_2"  data-name="Capa 2"><g  id="Capa_1-2"  data-name="Capa 1"><path class="cls-1" d="M0,0H575.94V517.28H0ZM102,22.8c-10.37-.

下一个代码:

<g  id="Capa_2"  data-name="Capa 2"><g  id="Capa_1-2"  data-name="Capa 1"><path fill="red" d="M0,0H575.94V517.28H0ZM102,22.8c-10.37-.
© www.soinside.com 2019 - 2024. All rights reserved.