215 views

Hoe verander je de kleur van een svg-element?

Hosted by Code Expert
css

Ik wil deze techniek gebruikenen de SVG-kleur wijzigen, maar tot nu toe heb ik heb dit niet kunnen doen. Ik heb dit in de CSS gezet, maar mijn afbeelding is altijd zwart, wat er ook gebeurt.

Mijn code:

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

Antwoord 1, autoriteit 100%

Je kunt de kleur van een afbeelding op die manier niet wijzigen. Als u SVG als afbeelding laadt, kunt u de weergave ervan niet wijzigen met CSS of Javascript in de browser.

Als u uw SVG-afbeelding wilt wijzigen, moet u deze laden met <object>, <iframe>of met <svg>inline.

Als je de technieken op de pagina wilt gebruiken, heb je de Modernizr-bibliotheek nodig, waar je kunt controleren op SVG-ondersteuning en voorwaardelijk een fallback-afbeelding kunt weergeven of niet. U kunt dan uw SVG inline maken en de gewenste stijlen toepassen.

Zie:

Antwoord 2, autoriteit 91%

2020 antwoord

CSS-filter werkt op alle huidige browsers

Om een SVG-kleur te wijzigen

  1. Voeg de SVG-afbeelding toe met een <img>-tag.
<img src="dotted-arrow.svg" class="filter-green"/>
  1. Gebruik de volgende Codepen (klik hier om codepen te openen)om op een specifieke kleur te filteren om een hexadecimale kleurcode om te zetten in een CSS-filter:

Uitvoer voor #00EE00is bijvoorbeeld 

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. Voeg het CSS filtertoe aan deze klasse.
   .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

Antwoord 3, autoriteit 99%

Als u de kleur van een SVG wilt wijzigen, kunt u de SVG-code direct wijzigen door het SVG-bestand te openen in een teksteditor. De code kan er uitzien als de onderstaande code

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

Je kunt zien dat er sommige XML-tags zijn, zoals pad, cirkel, polygoon, enz.. Daar kun je je eigen kleur toevoegen met behulp van stijlkenmerk. Kijk naar het onderstaande voorbeeld

<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Voeg het stijlkenmerk toe aan alle tags zodat u uw SVG in de gewenste kleur kunt krijgen

Bewerken: volgens de opmerking van Daniel kunnen we het opvulkenmerk rechtstreeks gebruiken in plaats van het opvulelement in het stijlkenmerk

Antwoord 4, autoriteit 18%

Alleen SVG met padinformatie. je kunt dat niet doen met de afbeelding.. als het pad kun je de lijn en vulinformatie wijzigen en je bent klaar. zoals Illustrator

dus: via CSS kun je pad fillwaarde

. overschrijven

path { fill: orange; }

maar als je een meer flexibele manier wilt, omdat je het wilt veranderen met een tekst wanneer er een zwevend effect aan de gang is.. gebruik 

path { fill: currentcolor; }


body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}
.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}
/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}
.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}
/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

Antwoord 5, autoriteit 15%

Een testpagina toegevoegd – om SVG te kleuren via filterinstellingen:

E.G
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Upload & Kleur je SVG – Jsfiddle

Het idee overgenomen van: https://blog. union.io/code/2017/08/10/img-svg-fill/

Antwoord 6, autoriteit 8%

SVG maskerop een box-element met een achtergrondkleurresulteert:

body{ overflow:hidden; }
.icon {
  --size: 70px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  transition: .12s;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.icon-bike {
  background: black;
  animation: 4s frames infinite linear;
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
}
@keyframes frames {
  0% { transform:translatex(100vw) }
  25% { background: red; }
  75% { background: lime; }
  100% { transform:translatex(-100%) }
}
<i class="icon icon-bike" style="--size:150px"></i>

Antwoord 7, Autoriteit 7%

Als u de kleur dynamisch wilt wijzigen:

  1. Open de svg in een code-editor
  2. Voeg het attribuut toe of herschrijven het kenmerk van fillvan elke pad naar fill="currentColor"
  3. Nu, dat SVG de kleur van je lettertypekleur zal nemen, zodat je zoiets kunt doen als: 
svg {
    color : "red";
}

Antwoord 8, Autoriteit 5%

De eenvoudigste manier zou zijn om een ​​lettertype uit de SVG te maken met behulp van een service zoals https: // Icomoon .io / app / # / selecteer of dergelijke. Upload uw SVG, klik op “Lettertype genereren”, inclusief lettertypenbestanden en CSS in uw zijde en gebruik gewoon en stijl het als elke andere tekst. Ik gebruik het altijd als dit omdat het veel gemakkelijker maakt.

EDIT:zoals vermeld in het artikelmet commentaar van @CodeMouse92-pictogramlettertypen verpesten schermlezers (en zijn mogelijk slecht voor SEO). Blijf dus liever bij de SVG’s.

Antwoord 9, autoriteit 4%

Je kunt het proberen met een filterhack:

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}
.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

Antwoord 10, autoriteit 4%

Om eenvoudig de kleur van de svg te veranderen:

Ga naar het svg-bestand en vermeld onder stijlen de kleur in de vulling.

<style>.cls-1{fill:#FFFFFF;}</style>

Antwoord 11, autoriteit 3%

Target het pad binnen de svg:

<svg>
   <path>....
</svg>

Je kunt inline doen, zoals:

<path fill="#ccc">

Of

svg{
   path{
        fill: #ccc

Antwoord 12, autoriteit 3%

Ik heb een manier gevonden om de kleur van het SVG-element te wijzigen tijdens het inspecteren van het zoekpictogram van het Google-zoekvak hieronder:

.search_icon {
  color: red;
  fill: currentColor;
  display: inline-block;
  width: 100px;
  height: 100px;
}
<span class="search_icon">
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</span>

Antwoord 13, autoriteit 2%

Je kunt de SVG-kleuring wijzigen met css als je een paar trucjes gebruikt.
Daar heb ik een klein scriptje voor geschreven.

  • doorloop een lijst met elementen die wel een svg-afbeelding hebben
  • laad het svg-bestand als xml
  • alleen svg-gedeelte ophalen
  • kleur van pad wijzigen
  • vervang src door de gewijzigde svg als inline afbeelding
$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');
  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // change the color
    $svg.find('path').attr('fill', '#000');
    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });
});

de bovenstaande code werkt mogelijk niet correct, ik heb dit geïmplementeerd voor elementen met een svg-achtergrondafbeelding die bijna hetzelfde werkt.
Maar hoe dan ook, u moet dit script aanpassen aan uw geval. hoop dat het heeft geholpen.

Antwoord 14, autoriteit 2%

Bijvoorbeeld in uw HTML:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

Gebruik jQuery:

$("#struct1").css("fill","<desired colour>");

Antwoord 15, autoriteit 2%

hier op de snelle en furieuze manier 🙂

body{
 background-color: #deff05;
 }
 svg{
   width: 30%;
    height: auto;
 }
 svg path {
    color:red;
    fill: currentcolor;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 514.666 514.666"><path d="M514.666,210.489L257.333,99.353L0,210.489l45.933,19.837v123.939h30V243.282l33.052,14.274v107.678l4.807,4.453  c2.011,1.862,50.328,45.625,143.542,45.625c93.213,0,141.53-43.763,143.541-45.626l4.807-4.452V257.557L514.666,210.489z   M257.333,132.031L439,210.489l-181.667,78.458L75.666,210.489L257.333,132.031z M375.681,351.432  c-13.205,9.572-53.167,33.881-118.348,33.881c-65.23,0-105.203-24.345-118.348-33.875v-80.925l118.348,51.112l118.348-51.111  V351.432z"></path></svg>

Antwoord 16

  1. Methode 1

De gemakkelijke en effectieve manier

open je .svg-bestand met een teksteditor

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526; 
   fill: rgb(109, 248, 248);" xml:space="preserve"> 
<svg />

geef een stijlkenmerk en vul dat met kleur

  1. Op een andere manier

vul met kleur in je vorm hier heb ik rectvorm fill="white

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
      <g>
          <title>background</title>
          <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" 
           x="-1"/>
           <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" 
           id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" 
              width="100%"/>
           </g>
       </g>
</svg>

Antwoord 17

Als je dit wilt doen met een inline-svg die bijvoorbeeld een achtergrondafbeelding is in je css:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

Antwoord 18

Gebruik een svg <mask>-element.

Dit is beter dan andere oplossingen omdat:

  • Komt goed overeen met je originele code.
  • Werkt in IE!
  • De ingesloten afbeelding kan nog steeds een extern, ongewijzigd bestand zijn.
  • De afbeelding hoeft niet eens een SVG te zijn.
  • Kleur is overgenomen van font-color, dus gemakkelijk te gebruiken naast tekst.
  • Kleur is een normale CSS-kleur, geen vreemde combinatie van filters.
<svg style="color: green; width: 96px; height: 96px" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <mask id="fillMask" x="0" y="0" width="100" height="100">
      <image xlink:href="https://svgur.com/i/AFM.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url(&quot;#fillMask&quot;)" />
</svg>

Antwoord 19

Eigenlijk is er een veel flexibelere oplossing voor dit probleem: het schrijven van een Webcomponentdie SVG als tekst patcht tijdens runtime. Ook gepubliceerd in gistmet een link naar JSFiddle

👍 filter: omkeren (42%) sepia (93%) verzadigen (1352%) tint-roteren (87 graden) helderheid (119%) contrast (119%);

<html>
<head>
  <title>SVG with color</title>
</head>
<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);
      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }
      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);
      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;
    })();
  </script>
</body>
</html>

Antwoord 20

Open uw afbeelding met een browser, klik met de rechtermuisknop op de afbeelding Klik op de knop Pagina bekijken en u ziet de SVG-tag van de afbeelding. Omgaan en plakken in uw HTML en wijzig vervolgens de vulling naar de kleur van uw keuze

Antwoord 21

Een goede aanpak is om een ​​mixin te gebruiken om de kleur van de slag te regelen en de kleur te vullen. Mijn SVG’s worden gebruikt als pictogrammen. 

@mixin icon($color, $hoverColor) {
    svg {
        fill: $color;
        circle, line, path {
            fill: $color
        }
        &:hover {
            fill: $hoverColor;
            circle, line, path {
                fill: $hoverColor;
            }
        }
    }
}

U kunt dan het volgende doen in uw SCSS: 

.container {
    @include icon(white, blue);
}

Antwoord 22

Als je csswilt gebruiken om de kleur te wijzigen, kun je ook een online tool zoals deze gebruiken: https://change-svg-color.vercel.app/

Antwoord 23

Voeg eenvoudig vulling:”desiredColor” toe aan de svg-tag van de afbeelding:
voorbeeld:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

Antwoord 24

U mag de kleur niet rechtstreeks op de svg-afbeelding instellen als u de kleur van de svg wilt programmeren.

In 2021 kun je de volgende css gebruiken om de kleur te veranderen.

html{
  --iron-icon-fill-color-1:green;
  --iron-icon-fill-color-2:red;
  --iron-icon-stroke-color:white;
}
svg#icon-green{
  fill: var(--iron-icon-fill-color-1, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}
svg#icon-red{
  fill: var(--iron-icon-fill-color-2, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}
svg#icon{
  fill: var(--iron-icon-fill-color-x, currentcolor);
  stroke: white;
}
<html>
<body>
<svg id="icon-green" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>
<svg id="icon-red" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>
</body>
</html>

Antwoord 25

kortste Bootstrap-compatibele manier, geen JavaScript:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

en gebruik het als:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>
Previous articleBepaal het type object?
Next articleHoe kloon ik een generieke lijst in C#?

Other episodes

Stylingmat-select in hoekig materiaal

css Code Expert - 0
Hoe de paneelcomponent van mat-select op te maken. Uit de documenten die ik krijg dat ik panelClass moet leveren, maak ik het als volgt:...
Read more

Hoe maak je schaduw op de rand-onderkant?

css Code Expert - 0
Ik moet de randschaduw toepassen op border-bottom door CSS3. Ik wil alleen CSS3-schaduw onderaan toepassen. Is dit mogelijk? Antwoord 1, autoriteit 100% Probeer: div{ -webkit-box-shadow:0px 1px 1px #de1dde; ...
Read more

Beperk tekstlengte tot n regels met CSS

css Code Expert - 0
Is het mogelijk om een ​​tekstlengte te beperken tot "n" regels met behulp van CSS (of deze te knippen wanneer deze verticaal overloopt). text-overflow: ellipsis;werkt...
Read more

CSS-selector voor uitgeschakeld invoertype=”submit”

css Code Expert - 0
Is er een CSS-kiezer voor uitgeschakelde input type="submit"of "button"? Moet ik gewoon inputgebruiken? Werkt dat in IE6? Antwoord 1, autoriteit 100% Werkt dat in IE6? Nee, IE6 ondersteunt...
Read more

Chrome-afdrukwebsite, ontbrekende lay-outopties

css Code Expert - 0
Ik heb een website gemaakt en een deel van de site is ontworpen om in staande modus op tabloidpapier te worden afgedrukt. Het probleem...
Read more

Hoe gebruik je afbeeldingen in css met Webpack

css Code Expert - 0
Ik ben bezig met het maken van een React w/ Webpack-configuratie en heb moeite om te doen wat een eenvoudige taak lijkt te zijn....
Read more

Verschil tussen uitvul-inhoud versus uitlijn-items?

css Code Expert - 0
Ik vind het heel moeilijk om te begrijpen wat het verschil is? Uit mijn onderzoek blijkt dat justify-contentkan doen... space-betweenen space-around, terwijl align-itemskan doen......
Read more

© Copyright - Code Expert 2021