Wie kann ich die Farbe eines 'svg'-Elements ändern?

Question

Ich möchte diese Technik verwenden und die Farbe des SVG ändern, aber bisher war ich dazu nicht in der Lage. Ich benutze dies im CSS, aber mein Bild ist immer schwarz, egal was ich mache.

Mein Code:

.change-my-color {
  fill: green;
}

Answer 1

Das hat eine Weile gedauert, bis ich es herausgefunden habe: Man kann die Farbe eines importierten SVGs nicht einfach ändern. Wie ich es geschafft habe, Themes/Farben aus createStyles in meiner React-Anwendung zu behalten, sieht so aus:

  }
/>;

const useRadioButtonClasses = makeStyles(
  (theme) =>
    createStyles({
      radio: { color: theme.mvf.palette.border },
      card: {
        height: '100%',
      },
      icon: ({ isError }) => ({
        fill: theme.mvf.palette.border,
        ...(isError && {
          fill: theme.mvf.palette.error,
        }),
      }),
      selectedRadioIcon: ({ isError }) => ({
        fill: theme.mvf.palette.primary.main,
        ...(isError && {
          fill: theme.mvf.palette.error,
        }),
      }),
...etc

Ich gehe davon aus, dass ein gewisses Maß an Wissen vorhanden ist, da dies kein vollständiger Code ist. Aber MURadio ist ein Material-UI-Radio-Button der Version 4, der in unserer App verwendet wird, mit dem benutzerdefinierten svg in einem der Props dieses Material-UI-Komponenten - damit wird das Standard-Radio-Symbol geändert... und Sie können dynamisch eine Themenfarbe auf das benutzerdefinierte Radio-Symbol (SVG) anwenden. Und da ich den isError-Zustand wie folgt übergebe: const classes = useRadioButtonClasses({ isError });, können wir die SVG-Farbe ändern, wenn ein Fehler vorliegt.

Funktioniert für mich und dieselbe Einrichtung (class.icon), wie wir die regulären Komponenten stylen. Hoffentlich hilft es Ihnen.

Answer 2

Ich habe eine Lösung, von der ich denke, dass sie dieses Problem löst, auch wenn sie kein -Tag verwendet, ermöglicht es, sich auf eine einzelne .svg-Datei an vielen Stellen zu beziehen und verschiedene Farben direkt mithilfe von Hex-Codes anzuwenden. Ich dachte, dies war der richtige Ort, um meine Antwort zu platzieren, da dies eines der ersten Ergebnisse ist, wenn nach der Änderung der Farbe eines SVG gesucht wird, und es recht schwierig ist, diese Lösung zu finden.

Der erste Schritt besteht darin, sicherzustellen, dass Ihr SVG korrekt formatiert ist mit den Abmessungen und viewBox, die Sie erwarten. Ich war verwirrt darüber, dass die viewBox im exportierten SVG unterschiedliche Abmessungen hatte, bis ich den Skalenwert auf 1 setzte, um das exportierte SVG auf 16x16 wie das Inkscape-SVG anzupassen, an dem ich gearbeitet hatte.

Als nächstes bauen Sie Ihre Icons, wenn Sie das noch nicht getan haben. Sie können sie alle nebeneinander auf der Seite platzieren, aber das erfordert späteres Neupositionieren beim Referenzieren in HTML. Ich ziehe es vor, alle meine Icons auf derselben 16x16 Seite zusammenzustellen. Sie können diejenigen ausblenden, an denen Sie nicht arbeiten, im "Ebenen"-Tab. Entweder gruppieren Sie alle Teile eines Icons oder kombinieren sie mit "Vereinigung", um ihm ein Label und eine ID zu geben. Beachten Sie, dass "menu" eine Gruppe von 3 Pfaden ist und "close" ein einzelner Pfad ist. Beide Varianten funktionieren. ("Gitter" ist eine Hilfslinie, die ich zur Gestaltung der Icons verwende und aus der endgültigen Datei entfernt wird).

Klicken Sie mit der rechten Maustaste auf das Icon im Ebenen-Tab, ob es sich um eine Gruppe oder einen einzelnen Pfad handelt, und gehen Sie zu Objekteigenschaften. Dort können Sie ihm ein Label und eine ID geben.

Exportieren Sie es nun als Plain SVG und legen Sie es an Ihrem gewählten Ort ab. Es erfordert eine weitere Modifikation in einem Texteditor, um alle Füll- und Strichfarben durch "currentColor" zu ersetzen.

Jetzt kann das SVG in HTML mit einem -Tag hinzugefügt werden. Das Icon kann neu positioniert werden, wenn es nicht oben links im SVG steht, indem die x- und y-Attribute des -Tags festgelegt werden:

Styles können in CSS wie folgt hinzugefügt werden:

.my-icon {
    color: #fe8721ff;
}
.my-other-icon {
    color: #1278efff;
}

Auf diese Weise wird die .svg-Datei nur einmal an den Client gesendet und alle Icons werden von dort geladen, was es ermöglicht, verschiedene Größen und Farben leicht einzustellen.

Answer 3

Wenn Sie ein Reactjs-Projekt verwenden, können Sie den folgenden Ansatz verwenden.

import React from 'react';

type PropsType = {
  colorprimary: string;
  onClick: () => void;
  className: string;
  height?: string;
  width?: string;
};

const HamburgerIcon: React.FC = (props) => {
  const { colorprimary } = props;

  return (

  );
};

HamburgerIcon.defaultProps = {
  width: '25',
  height: '20',
};
export default HamburgerIcon;

Wenn Sie kein TypeScript verwenden, ignorieren Sie die Typen. Die obige Lösung bietet mehr Anpassungsmöglichkeiten für SVG, Sie können sogar mehr Props hinzufügen, um sie individueller zu gestalten.

Hier sind die Vorteile des bereitgestellten Ansatzes:

1. Wiederverwendbarkeit: Sie können das SVG-Symbolkomponente in Ihrer gesamten Anwendung verwenden.
2. Anpassung: Ändern Sie problemlos die Farbe, Breite und Höhe des Symbols mithilfe von Props.
3. Wartbarkeit: Zentrale Stelle für Icon-Code vereinfacht Updates.
4. Konsistenz: Gewährleistet ein einheitliches Erscheinungsbild für alle Instanzen des Symbols.
5. Skalierbarkeit: Verwalten Sie zahlreiche Symbole sauber als separate Komponenten.
6. Lesbarkeit: Verbesserte Codelesbarkeit im Vergleich zu Inline-SVG.

Answer 4

Ich hatte das gleiche Problem bei der Verwendung von SVG-Elementen mit Pfaden als Kind in Styled-Component. Das Auswählen des Kindes hat mein Problem mit dynamischen Farben gelöst:

import { styled, css } from 'styled-component';

export const Icon = styled.svg(({ theme }) => {
  const {
    colorsValues,
  } = theme.myCustomizationObj;

  return css`
    // Select the path under "svg" element
    & path {
      fill: ${colorsValue};
    }
  `;
});

Answer 5

Ich habe festgestellt, dass Inkscape wirklich gut funktioniert. Wenn Sie kein SVG in mehreren Farben benötigen, erstellen Sie einfach eine in der gewünschten Farbe und verwenden Sie sie.

Nach dem Laden des Bildes wählen Sie jeden Pfad aus, ändern die Farbe, speichern es als neues SVG-Bild.