SVG Background-Image Farbe per CSS ändern

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    SVG Werte werden in der SVG Definition geändert, also entweder beim Erstellen oder falls das SVG direct über XML eingebunden wurde über die CSS Eigenschaften.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Ja, du hast recht man muss das SVG direkt im PHP einbinden damit es per CSS bearbeitet werden kann. Als Beispiel das hier:

    Code
    <svg   xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:cc="http://creativecommons.org/ns#"   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:svg="http://www.w3.org/2000/svg"xmlns="http://www.w3.org/2000/svg"  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"     version="1.1"    id="Capa_1"    x="0px"    y="0px"    width="24"     height="24"    viewBox="0 0 24 24"    xml:space="preserve"     inkscape:version="0.91 r13725"     sodipodi:docname="listing.svg"><metadata     id="metadata57"><rdf:RDF><cc:Work         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title  /></cc:Work></rdf:RDF></metadata><defs     id="defs55" /><sodipodi:namedview    pagecolor="#ffffff"     bordercolor="#666666"    borderopacity="1"    objecttolerance="10"     gridtolerance="10"    guidetolerance="10"    inkscape:pageopacity="0"     inkscape:pageshadow="2"    inkscape:window-width="1920"     inkscape:window-height="1017"    id="namedview53"    showgrid="false"     inkscape:zoom="22.627417"    inkscape:cx="0.56964691"     inkscape:cy="13.932507"    inkscape:window-x="-8"     inkscape:window-y="-8"    inkscape:window-maximized="1"     inkscape:current-layer="Capa_1" /> <g    id="g3"     style="fill-opacity:1"     transform="matrix(0.04690739,0,0,0.04690739,4.5638823e-4,4.7984193e-4)">      <g    id="g5"    style="fill-opacity:1">         <path     d="m 63.953,164.453 -54.818,0 c -2.474,0 -4.615,0.9 -6.423,2.709 C  0.903,168.972 0,171.114 0,173.589 l 0,54.817 c 0,2.473 0.903,4.619  2.712,6.424 1.809,1.803 3.949,2.712 6.423,2.712 l 54.818,0 c 2.474,0  4.615,-0.905 6.423,-2.712 1.809,-1.809 2.712,-3.951 2.712,-6.424 l  0,-54.817 c 0,-2.475 -0.904,-4.617 -2.712,-6.427 -1.808,-1.806  -3.949,-2.709 -6.423,-2.709 z"    id="path7"     style="fill-opacity:1"    inkscape:connector-curvature="0" />          <path    d="m 63.953,383.722 -54.818,0 c -2.474,0 -4.615,0.896  -6.423,2.707 C 0.903,388.238 0,390.378 0,392.854 l 0,54.82 c 0,2.471  0.903,4.609 2.712,6.42 1.809,1.813 3.949,2.714 6.423,2.714 l 54.818,0 c  2.474,0 4.615,-0.903 6.423,-2.714 1.809,-1.807 2.712,-3.949 2.712,-6.42 l  0,-54.82 c 0,-2.477 -0.904,-4.616 -2.712,-6.426 -1.808,-1.803  -3.949,-2.706 -6.423,-2.706 z"    id="path9"     style="fill-opacity:1"    inkscape:connector-curvature="0" />          <path    d="m 63.953,274.082 -54.818,0 c -2.474,0 -4.615,0.91  -6.423,2.714 C 0.904,278.6 0,280.749 0,283.22 l 0,54.815 c 0,2.478  0.903,4.62 2.712,6.427 1.809,1.808 3.949,2.707 6.423,2.707 l 54.818,0 c  2.474,0 4.615,-0.896 6.423,-2.707 1.809,-1.807 2.712,-3.949 2.712,-6.427  l 0,-54.815 c 0,-2.471 -0.904,-4.613 -2.712,-6.424 -1.808,-1.807  -3.949,-2.714 -6.423,-2.714 z"    id="path11"     style="fill-opacity:1"    inkscape:connector-curvature="0" />          <path    d="m 63.953,54.817 -54.818,0 C 6.661,54.817 4.52,55.72  2.712,57.529 0.904,59.338 0,61.479 0,63.953 l 0,54.817 c 0,2.475  0.903,4.615 2.712,6.424 1.809,1.809 3.949,2.712 6.423,2.712 l 54.818,0 c  2.474,0 4.615,-0.9 6.423,-2.712 1.809,-1.809 2.712,-3.949 2.712,-6.424 l  0,-54.817 c 0,-2.475 -0.904,-4.615 -2.712,-6.424 -1.808,-1.804  -3.949,-2.712 -6.423,-2.712 z"    id="path13"     style="fill-opacity:1"    inkscape:connector-curvature="0" />          <path    d="m 502.49,383.722 -383.719,0 c -2.474,0 -4.615,0.896  -6.423,2.707 -1.809,1.81 -2.712,3.949 -2.712,6.426 l 0,54.82 c 0,2.471  0.903,4.609 2.712,6.42 1.809,1.813 3.946,2.714 6.423,2.714 l 383.719,0 c  2.478,0 4.616,-0.903 6.427,-2.714 1.81,-1.811 2.71,-3.949 2.71,-6.42 l  0,-54.82 c 0,-2.477 -0.903,-4.616 -2.71,-6.426 -1.811,-1.804  -3.95,-2.707 -6.427,-2.707 z"    id="path15"     style="fill-opacity:1"    inkscape:connector-curvature="0" />          <path    d="m 502.49,274.082 -383.719,0 c -2.474,0 -4.615,0.91  -6.423,2.714 -1.808,1.804 -2.712,3.953 -2.712,6.424 l 0,54.815 c 0,2.478  0.903,4.62 2.712,6.427 1.809,1.808 3.946,2.707 6.423,2.707 l 383.719,0 c  2.478,0 4.616,-0.896 6.427,-2.707 1.81,-1.807 2.71,-3.949 2.71,-6.427 l  0,-54.815 c 0,-2.471 -0.903,-4.613 -2.71,-6.424 -1.811,-1.804  -3.95,-2.714 -6.427,-2.714 z"    id="path17"     style="fill-opacity:1"    inkscape:connector-curvature="0" />          <path    d="m 508.917,57.529 c -1.811,-1.805 -3.949,-2.712  -6.427,-2.712 l -383.719,0 c -2.474,0 -4.615,0.903 -6.423,2.712  -1.808,1.809 -2.712,3.949 -2.712,6.424 l 0,54.817 c 0,2.475 0.903,4.615  2.712,6.424 1.809,1.809 3.946,2.712 6.423,2.712 l 383.719,0 c 2.478,0  4.616,-0.9 6.427,-2.712 1.81,-1.809 2.71,-3.949 2.71,-6.424 l 0,-54.817 c  -0.001,-2.474 -0.904,-4.615 -2.71,-6.424 z"    id="path19"     style="fill-opacity:1"    inkscape:connector-curvature="0" />          <path    d="m 502.49,164.453 -383.719,0 c -2.474,0 -4.615,0.9  -6.423,2.709 -1.809,1.81 -2.712,3.952 -2.712,6.427 l 0,54.817 c 0,2.473  0.903,4.615 2.712,6.424 1.809,1.803 3.946,2.712 6.423,2.712 l 383.719,0 c  2.478,0 4.616,-0.905 6.427,-2.712 1.81,-1.809 2.71,-3.951 2.71,-6.424 l  0,-54.817 c 0,-2.475 -0.903,-4.617 -2.71,-6.427 -1.811,-1.806  -3.95,-2.709 -6.427,-2.709 z"    id="path21"     style="fill-opacity:1"    inkscape:connector-curvature="0" />      </g> </g> <g    id="g23"     transform="translate(0,-487.62601)"> </g> <g    id="g25"     transform="translate(0,-487.62601)"> </g> <g    id="g27"     transform="translate(0,-487.62601)"> </g> <g    id="g29"     transform="translate(0,-487.62601)"> </g> <g    id="g31"     transform="translate(0,-487.62601)"> </g> <g    id="g33"     transform="translate(0,-487.62601)"> </g> <g    id="g35"     transform="translate(0,-487.62601)"> </g> <g    id="g37"     transform="translate(0,-487.62601)"> </g> <g    id="g39"     transform="translate(0,-487.62601)"> </g> <g    id="g41"     transform="translate(0,-487.62601)"> </g> <g    id="g43"     transform="translate(0,-487.62601)"> </g> <g    id="g45"     transform="translate(0,-487.62601)"> </g> <g    id="g47"     transform="translate(0,-487.62601)"> </g> <g    id="g49"     transform="translate(0,-487.62601)"> </g> <g    id="g51"     transform="translate(0,-487.62601)"> </g> </svg>

    Nun kann man einfach mit dieser CSS line die Farben ändern, so dass immer die aktuelle color übernommen wird:

    Code
    svg {fill: currentColor;}

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden