Colour of Icon inserted via SVG-code not showing properly.

  • Resolved myrthelogman

    (@myrthelogman)


    7 months ago

    See video for full sight of my issue: https://youtu.be/3QJ54KfA2Vs

    The colours of the icons above turned from green to white after adding the last icon. Ithink that might be causing the problem, but i have no idea how and how to fix it. The SVG code should be fine and well according to the plugin it self and according to illustrator. But for some reason the green colour just turns white after adding it in.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi @myrthelogman,

    Can you share the SVG code for the last icon? That will help me diagnose.

    Thanks,
    Nick

    Thread Starter myrthelogman

    (@myrthelogman)

    <svg id="Layer_1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 456.63 260.22"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#055636;}</style></defs><path class="cls-2" d="M456.63,79.57S175-46.04,140.62,230.3c0,0,66.11-78.01,125.61-100.49,0,0-68.75,50.24-109.74,124.29,0,0,88.59,18.51,145.44-38.34,56.85-56.85,71.4-136.19,154.7-136.19Z"></path><path class="cls-2" d="M130.27,250.59S161.16,125.68,0,139.11c0,0,29.55,4.03,38.95,44.32,9.4,40.29,26.92,67.63,80.61,76.79,0,0-9.43-41.87-34.95-72.76,0,0,24.17,18.8,45.66,63.12Z"></path><path class="cls-1" d="M0,106.37s73.87-14.26,124.9,30.06c0,0,64.47-173.25,306.21-103.41,0,0-209.51-100.73-316.95,49.69,0,0-61.78-17.14-114.16,23.66Z"></path></svg>
    Plugin Author Nick Diego

    (@ndiego)

    Ah, I figure this was the issue. Notice the following styles noted in the code. 

    <style>.cls-1{fill:#fff;}.cls-2{fill:#055636;}</style>

    It’s likely that your other custom SVGs have the class .cls-1 and/or .cls-2. The styling from the last custom SVG (the code you provided) is overriding the styling of the previous SVGs since they use the same CSS class. If you change all instances of .cls-1 and .cls-2 to some other name, everything should work as expected.

    Since this is not an issue with the plugin, I am going to close out this ticket, but let me know if I can answer any additional questions.

    Best,
    Nick

    Thread Starter myrthelogman

    (@myrthelogman)

    Hi Nick,

    Thanks for the quick and helpfull response!

    As i do not often work with code i wasn’t sure this was a plugin issue or coding issue.

    Thanks for showing what caused the issue!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Colour of Icon inserted via SVG-code not showing properly.’ is closed to new replies.