SVG Füllfarbe Transparenz / Alpha?

Question

Ist es möglich, eine Transparenz- oder Alphastufe für SVG-Füllfarben festzulegen?

Ich habe versucht, dem Fill-Tag zwei Werte hinzuzufügen (indem ich es von fill="#044B94" a fill="#044B9466" ), aber das funktioniert nicht.

Answer 1

Um die Transparenz eines svg-Codes zu ändern, öffnen Sie ihn am einfachsten in einem beliebigen Texteditor und suchen Sie nach den Stilattributen. Die Art und Weise, wie die Stile angezeigt werden, hängt von dem Ersteller der Grafikdatei ab. Da ich ein Inkscape-Benutzer bin, ist die übliche Art, die Stilwerte zu setzen, ein style-Tag, als ob es html wäre, aber mit svg-eigenen Attributen wie fill , stroke , stroke-width , opacity und so weiter. opacity wirkt sich auf das gesamte svg-Objekt, den Pfad oder die Gruppe aus, in der es angegeben ist und fill-opacity , stroke-opacity wirkt sich nur auf die Transparenz der Füllung und des Strichs aus. Das heißt, ich habe auch verwendet und probiert, nur zu verwenden fill und statt der Verwendung von #fff Verwenden Sie stattdessen den rgba-Standard wie folgt rgba(255, 255, 255, 1) genau wie in css. Dies funktioniert gut für die meisten modernen Browsern.

Denken Sie daran, dass es meiner Erfahrung nach am besten ist, immer eine unbearbeitete Version zur Hand zu haben, wenn Sie Ihr svg weiter bearbeiten wollen. Inkscape ist flexibler mit handgeänderten svgs, aber Illustrator und CorelDraw können Probleme beim Importieren und Bearbeiten von svg haben.

Beispiel

<path style="fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Beispiel 2

<path style="fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Beispiel 3

<path style="fill:rgba(255, 0, 0, .5);stroke:rgba(242, 242, 242, .5);stroke-width:2px" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Beachten Sie, dass im letzten Beispiel die fill-opacity and stroke-opacity wurden entfernt, da der rgba-Standard in beiden Fällen sowohl Farbe als auch Alphakanal abdeckt.

Answer 2

Ich gebe Ihnen einen verwandten Tipp, auf den Sie stoßen könnten, wenn Sie möchten, dass das SVG die Stile des Containers erbt, wie z. B. normaler Zustand, Hover-Zustand und besuchter Zustand: Verwenden Sie fill='currentColor' für den Pfad. Auf diese Weise können die SVGs, die von Font Awesome Icons erzeugt werden, jede beliebige Farbe annehmen, die auf Schriftarten angewendet wird!