Wie fülle Farbe für Svg Rect

-1

Ich habe das folgende Symbol in Svg, die eine Rect enthalten. Ich muss rot färben (jetzt sind sie in weiß). Mit meiner aktuellen CSS-Lösung kann ich das gewünschte Ergebnis nicht erreichen. Irgendeine Idee, wie man es repariert?Wie fülle Farbe für Svg Rect

Hinweise diese Frage unterscheidet sich von anderen, weil es nur auf rect und nicht auf Pfad bezogen ist.

.icon rect { 
 
    fill: red; 
 
} 
 

 
html { 
 
    background-color: gray; 
 
}

<div class="icon"> 
 
    <svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g transform="translate(-28.000000, -26.000000)" stroke-width="2" stroke="#FFFFFF"> 
 
     <rect x="43" y="27" width="1" height="18"></rect> 
 
     <rect x="29" y="27" width="1" height="18"></rect> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
</div>

Quelle

2017-12-29 Radex

Mögliche Duplikat [Kann ich die Füllfarbe eines svg Pfad mit CSS ändern?] (Https://stackoverflow.com/questions/9529300/can-i-change-the-fill -color-of-a-svg-path-with-css) – Rob

Die rect-Elemente haben keine sichtbare Füllung, weil 1/2 der Strichbreite> = die Breite ist, also sehen Sie nur die Strich- und Strichfarbe. –

Sie benötigen stroke Wert von g (ein Wert, den Sie auch inline angegeben) zu ändern, da es über dem rect los ist:

.icon g { 
 
    stroke: rgba(0,0,0,0.5); 
 
} 
 
.icon rect { 
 
    fill: red; 
 
} 
 

 
html { 
 
    background-color: gray; 
 
}

<div class="icon"> 
 
    <svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g transform="translate(-28.000000, -26.000000)" stroke-width="2" stroke="#FFFFFF"> 
 
     <rect x="43" y="27" width="1" height="18"></rect> 
 
     <rect x="29" y="27" width="1" height="18"></rect> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
</div>

Oder einfach entfernen Hub von g:

.icon rect { 
 
    fill: red; 
 
} 
 

 
html { 
 
    background-color: gray; 
 
}

<div class="icon"> 
 
    <svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g transform="translate(-28.000000, -26.000000)" > 
 
     <rect x="43" y="27" width="1" height="18"></rect> 
 
     <rect x="29" y="27" width="1" height="18"></rect> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
</div>

Quelle

2017-12-29 14:06:43

warum wenden sie g stroke und nicht rect an? – Radex

Oder er hätte SO einfach durchsuchen können und ein paar Beispiele für das gleiche in bereits beantworteten Fragen gefunden. – Rob

@Radex, weil der Strich über die Rect kommt, lesen Sie hier mehr: https: //www.w3schools.com/graphics/svg_stroking.asp –

Wie fülle Farbe für Svg Rect

Antwort

Verwandte Themen