wollte nur höflich auf deinen Irrtum hinweisen
Welchen Irrtum meinerseits meinst Du? Das Icon funzt jetzt sowohl im Fileexplorer unter Windows sowie im Script!
Und wie gesagt, color zu setzen kann Nebenwirkungen haben, deshalb ist currentColor oft keine Lösung.
Könntest Du diese Aussage präzisieren?
Nicht streiten!
Schaut Euch den Code eines SVG an.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
<path d="M14.555 3.2l-2.434 2.436a1.243 1.243 0 1 1-1.757-1.757L12.8 1.445A3.956 3.956 0 0 0 11 1a3.976 3.976 0 0 0-3.434 6.02l-6.273 6.273a1 1 0 1 0 1.414 1.414L8.98 8.434A3.96 3.96 0 0 0 11 9a4 4 0 0 0 4-4 3.956 3.956 0 0 0-.445-1.8z"/>
</svg>Bei diesem muss man per fill eine Farbe auswählen.
Beim nächsten kannst Farben definieren, wie du willst, es ist rot, es bleibt rot!
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#ff1500">
<path d="m8 5.5s0-4 3.5-4 3.5 3 3.5 4c0 4.5-7 9-7 9z"/>
<path d="m8 5.5s0-4-3.5-4-3.5 3-3.5 4c0 4.5 7 9 7 9l1-6z"/>
</svg>Und dann gibt es noch so etwas:
<svg xmlns="http://www.w3.org/2000/svg" width="264px" height="292px" viewBox="0 0 264 292" fill="url(#linearGradient-1)">
<defs>
<linearGradient id="linearGradient-1" x1="50%" y1="100%" x2="50%" y2="-2.48949813e-15%">
<stop stop-color="red" offset="0%"/>
<stop stop-color="blue" offset="100%"/>
</linearGradient>
</defs>
<path d="M46.1009025,179.531325 L32.7877403,195.15982 C28.0323196,200.74227 19.6586441,193.609139 24.4140648,188.026689 L47.3899823,161.05496 C47.4107785,161.030236 47.4317883,161.005698 47.4530091,160.981349 C49.7278205,158.354828 52.8134632,158.605367 54.8991832,160.190473 C55.0509439,160.304381 55.1978897,160.427032 55.3392872,160.558367 C55.6030277,160.800472 55.8456287,161.065394 56.0624698,161.349198 L78.7877403,188.026689 C80.7575,190.339016 80.4797947,193.810333 78.167468,195.780092 C75.8551414,197.749852 72.3838245,197.472147 70.4140648,195.15982 L57.1009025,179.531325 L57.1009025,238.093255 L117.600903,238.093255 C120.638469,238.093255 123.100903,240.555688 123.100903,243.593255 C123.100903,246.630821 120.638469,249.093255 117.600903,249.093255 L51.6009025,249.093255 C48.5633364,249.093255 46.1009025,246.630821 46.1009025,243.593255 L46.1009025,179.531325 Z M46.1009025,179.531325 L46.1009025,164.630392 L57.1009025,165.577109 Z M211.5,40 C214.537566,40 217,42.4624339 217,45.5 L217,109.561929 L230.313162,93.9334345 C235.068583,88.3509841 243.442258,95.4841151 238.686838,101.066566 L215.71092,128.038295 C215.690124,128.063019 215.669114,128.087556 215.647893,128.111906 C213.373082,130.738427 210.287439,130.487887 208.201719,128.902781 C208.049959,128.788873 207.903013,128.666223 207.761615,128.534888 C207.497875,128.292783 207.255274,128.027861 207.038433,127.744057 L184.313162,101.066566 C182.343402,98.7542389 182.621108,95.282922 184.933434,93.3131622 C187.245761,91.3434025 190.717078,91.6211078 192.686838,93.9334345 L206,109.561929 L206,51 L145.5,51 C142.462434,51 140,48.5375661 140,45.5 C140,42.4624339 142.462434,40 145.5,40 L211.5,40 Z M206,123.516146 L206,109.561929 L217,109.561929 Z M144,144 L246,144 C252.627417,144 258,149.372583 258,156 L258,270 C258,276.627417 252.627417,282 246,282 L144,282 C137.372583,282 132,276.627417 132,270 L132,156 C132,149.372583 137.372583,144 144,144 Z M222.717881,251 C226.676898,251 229.76988,250.338786 232,249.029013 L232,239.006405 C230.480473,239.512597 229.160801,239.765693 228.040983,239.765693 C226.010717,239.765693 224.817936,239.057024 224.46264,237.639685 C224.107343,236.22551 223.929695,233.9951 223.929695,230.957946 L223.929695,190.563795 C223.929695,186.0049 223.070005,182.312859 221.344279,179.478182 C219.615381,176.640341 217.334505,174.441568 214.492134,172.869208 C211.649762,171.303175 208.477472,170.265481 204.975265,169.759289 C201.473057,169.25626 197.945471,169 194.392507,169 C190.027436,169 185.865392,169.458737 181.906375,170.366719 C177.947357,171.277866 174.445149,172.774297 171.399751,174.846522 C168.354353,176.921911 165.918035,179.63004 164.090796,182.970909 C162.263557,186.311779 161.248425,190.415101 161.045398,195.271384 L173.98834,195.271384 C174.292879,189.500791 176.272388,185.5778 179.926866,183.502411 C183.581344,181.430186 188.149441,180.389328 193.631157,180.389328 C195.661422,180.389328 197.717066,180.54435 199.798088,180.848065 C201.875938,181.151781 203.757106,181.759211 205.432074,182.670358 C207.107043,183.581504 208.477472,184.900768 209.543362,186.618658 C210.609251,188.342876 211.142196,190.617578 211.142196,193.452255 C211.142196,195.881978 210.431603,197.732744 209.010417,198.995062 C207.586059,200.257379 205.660479,201.222308 203.224161,201.877194 C200.787842,202.538408 197.970849,203.041437 194.773181,203.395771 C191.575513,203.750106 188.200197,204.284772 184.647233,204.990277 C181.297295,205.600872 178.023492,206.356997 174.825824,207.268143 C171.628156,208.179289 168.785785,209.517535 166.29871,211.292372 C163.808462,213.064046 161.806748,215.367221 160.284049,218.201898 C158.76135,221.036575 158,224.681161 158,229.135653 C158,233.083954 158.685215,236.450133 160.055644,239.234191 C161.426073,242.021413 163.304068,244.296115 165.68963,246.067788 C168.07202,247.836298 170.841428,249.104942 173.98834,249.864231 C177.132079,250.620356 180.482017,251 184.038153,251 C189.51987,251 194.620911,250.063544 199.341278,248.190632 C204.061645,246.317721 208.195139,243.255257 211.751275,239.003241 C211.751275,243.252093 212.744202,246.317721 214.723711,248.190632 C216.703219,250.063544 219.367943,251 222.717881,251 Z M204.597762,211.441066 C207.233935,210.884255 209.368886,209.998418 210.993098,208.783556 L210.993098,221.992014 C210.993098,223.81747 210.536288,225.769474 209.622669,227.838535 C208.70905,229.913924 207.287864,231.837455 205.359112,233.609128 C203.43036,235.383965 200.943285,236.855087 197.897887,238.016166 C194.852489,239.180408 191.198011,239.762529 186.934454,239.762529 C185.005702,239.762529 183.102328,239.560052 181.224332,239.155099 C179.343165,238.753308 177.722125,238.092095 176.351695,237.180948 C174.981266,236.269802 173.861448,235.08025 173.001758,233.612292 C172.138895,232.144334 171.707463,230.347351 171.707463,228.221343 C171.707463,224.981712 172.443435,222.428604 173.915377,220.552529 C175.387319,218.679617 177.290693,217.236969 179.625498,216.224584 C181.960304,215.215363 184.596476,214.481384 187.543533,214.025811 C190.487418,213.567074 193.405924,213.16212 196.299053,212.807786 C199.192181,212.453451 201.955245,211.997878 204.597762,211.441066 Z M18,6 L120,6 C126.627417,6 132,11.372583 132,18 L132,132 C132,138.627417 126.627417,144 120,144 L18,144 C11.372583,144 6,138.627417 6,132 L6,18 C6,11.372583 11.372583,6 18,6 Z M78.8114264,131.89967 C79.1886639,132.161919 79.5705706,132.376051 79.6601081,132.375518 C79.7496424,132.374982 81.6282748,131.901174 83.834847,131.32261 C96.2176057,128.075842 104.920435,123.909523 110.813868,118.406905 C117.348914,112.305217 120.414176,105.179523 120.399952,96.1225 C120.385552,86.9536709 117.069568,80.53459 109.825163,75.6518347 C105.073833,72.4494188 98.8984428,70.5956913 90.8162903,69.9457502 L88.2307802,69.7378327 L86.7434549,65.9459886 C85.2314591,62.0912547 84.3255424,60.7019385 83.3240148,60.7019385 C82.6569726,60.7019385 82.5418482,61.1734376 82.3143552,64.8370087 C82.2202071,66.3532012 81.9967909,68.1095309 81.8178765,68.7399668 C81.4662538,69.9789594 81.5080892,69.9589028 78.1255343,70.5103282 C72.6258737,71.4068849 66.636891,72.9304898 61.4957506,74.7409614 L58.9077901,75.6523217 L59.1149672,71.6230235 C59.597796,62.2326496 61.0182885,50.9792856 61.7481701,50.7623507 C62.0143012,50.6832544 63.9679818,50.3299847 66.0896858,49.9773091 C71.4514928,49.0860514 81.3760096,47.0860772 85.069293,46.1525652 C93.043092,44.1371074 94.641391,43.3470854 94.4283904,41.5264477 C94.2036534,39.6054594 89.8636282,37.4623934 85.686516,37.2097866 C83.4417655,37.0740399 83.0915439,37.1326813 81.8288723,37.8557121 C79.0425024,39.4512458 77.8414266,39.8515666 70.7998812,41.5316732 C66.855638,42.4727662 63.4383766,43.242753 63.2059644,43.242753 C62.8799596,43.242753 63.1921695,41.2303675 64.5721906,34.4365849 C65.5560317,29.5931924 66.5761933,24.9412384 66.8392198,24.0989092 C67.1022463,23.2565801 67.3159042,22.2228126 67.3140124,21.801648 C67.3052849,19.856903 64.7225801,16.3630505 61.8360472,14.3911151 C60.8453642,13.7143266 56.6810964,12 56.0278029,12 C55.7608077,12 54.9796718,13.0349193 54.9796718,13.3886577 C54.9796718,13.6229538 55.7459233,14.6669763 56.6824512,15.7087078 C57.6189791,16.7504392 58.4723763,17.9473888 58.5788905,18.3685963 C58.8573908,19.4699217 58.4890598,25.957265 57.9144191,30.0717885 C57.0447056,36.2990971 55.5449493,44.3042776 55.1798712,44.6678514 C54.5791558,45.2660949 44.1388967,46.4110377 39.0861796,46.4327882 C34.0737579,46.454364 33.0530994,46.2047436 30.2226197,44.2650465 C28.0505873,42.7765774 26.2863541,44.1712417 27.3978493,46.4980855 C28.1277155,48.0260185 32.1992578,52.2595279 33.8778915,53.2359099 C35.0822818,53.9364459 35.3151415,53.968727 37.1306659,53.6868041 C38.2061986,53.5197901 40.4054938,53.3057405 42.0179888,53.2111393 C43.6304839,53.116535 47.0053914,52.7488047 49.5177822,52.3939575 C52.030173,52.0391103 54.1639345,51.8263686 54.2594806,51.9211965 C54.3550236,52.0160243 54.2111829,53.7203563 53.9398362,55.7085961 C53.1904565,61.1995008 52.5294909,68.5696785 52.3078215,73.9065257 L52.1085325,78.7045825 L50.9980588,79.2202839 C46.7758122,81.1810852 39.1199695,85.9598022 34.6124269,89.4480678 C31.3496751,91.9730244 25.0895587,97.9669465 23.3675034,100.214832 C19.459482,105.316167 17.752166,110.699529 18.0288701,117.048133 C18.2984176,123.232511 20.0343696,126.372171 23.8370342,127.552841 C26.1615269,128.274561 27.8069262,128.227501 31.3387317,127.338292 C37.626762,125.755142 44.3484686,122.644543 51.3607237,118.072736 C54.9768573,115.715109 55.9055063,115.329111 55.9055063,116.183671 C55.9055063,116.35489 56.4675218,117.921668 57.1544262,119.665397 C58.1406992,122.169078 58.6661473,123.071466 59.6529943,123.956347 C60.6539633,124.853896 61.0656233,125.03931 61.721648,124.888092 C62.8493144,124.628155 64.0929386,123.109478 64.5778752,121.400148 C65.285364,118.90636 65.0686755,117.226496 63.5125915,113.141653 C62.7234226,111.070019 62.0777363,109.262191 62.0777363,109.124257 C62.0777363,108.986327 63.0616762,107.786752 64.2642673,106.458537 C70.2110381,99.8905628 78.0216063,89.462954 84.6095823,79.2962345 L87.538185,74.7767497 L90.1613828,74.9655631 C99.7460104,75.6554552 106.25064,79.3133506 109.177952,85.6595807 C110.549098,88.6321418 110.879794,90.3407222 111.057471,95.3703828 C111.286108,101.842586 110.740409,104.955503 108.656609,109.066014 C106.911355,112.508714 105.265663,114.459374 101.436982,117.623521 C95.9327419,122.17241 89.2734828,125.894154 82.4560295,128.231648 C80.6792605,128.840848 78.9780396,129.561591 78.6755386,129.833305 C77.9297543,130.503177 77.983752,131.324283 78.8114264,131.89967 Z M39.7725287,111.939048 C38.214343,112.39743 36.7400953,112.632444 34.9222113,112.712251 C30.6961595,112.897779 30.0211496,112.251266 30.2630511,108.249782 C30.5928329,102.794598 33.6868031,98.2602149 40.9463229,92.5928529 C43.1647063,90.8610085 48.6041184,87.2264045 50.8640778,85.9658343 L52.2549896,85.1900024 L52.4176618,89.6065945 C52.5983374,94.5120588 52.9312084,98.5532985 53.4461928,102.09354 C53.7589611,104.243668 53.7526408,104.469027 53.3717018,104.749666 C50.0590246,107.190129 42.7115971,111.074445 39.7725287,111.939048 Z M63.1131777,96.9273409 C61.9586642,98.2993321 60.8867638,99.4643035 60.7311739,99.5161668 C60.5561209,99.5745178 60.3855578,99.0510245 60.2837275,98.1428599 C60.0331549,95.9081583 59.6302831,88.1053533 59.6248349,85.3814703 L59.6199951,82.9610043 L62.0918503,81.9230483 C65.7135643,80.4022565 68.7851245,79.4266343 72.2634836,78.692222 C76.8014877,77.7340777 76.6344942,77.5902867 74.6726043,80.7666536 C70.8516436,86.9529262 67.1401264,92.1418192 63.1131777,96.9273409 Z"/>
</svg>Schön, nicht war?
Schaut Euch den Code eines SVG an.
Super, wollte ich schon immer mal sehen! Bin ich gerade blind von geworden. Danke!
Horstmann
Wenn der Code nicht im .svg enthalten ist kann das css den entsprechenden Code einfügen.
es reicht, gN8
Wenn der Code nicht im .svg enthalten ist kann das css den entsprechenden Code einfügen.
Nein.
CSS kann nur - falls nötig - einem Element die Fähigkeit den im .svg enthaltenen Code zu benutzen hinzufügen (-moz-context-properties), oder eben via fill/stroke etc. diesen enthaltenen Code manipulieren - falls context-etc. im .svg gesetzt ist.
Und wie in deinem Script enthalten, muss in wenigen Fällen auch svg.context-properties.content.enabled gesetzt werden.
CSS kann aber nichts in einen .svg Code hinein schreiben.
Und wie gesagt, color zu setzen kann Nebenwirkungen haben, deshalb ist currentColor oft keine Lösung.
Könntest Du diese Aussage präzisieren?
Color wird in Fx für alles Mögliche benutzt, für Text natürlich, dann oft für den Hintergrund, oder auch nur für Hover, und eben auch für farblich undefinierte .svgs, via diversen internen Codes.
Der Punkt ist, dass man die .svg Iconfarbe innerhalb eines Elements nicht trennen kann von dem oben erwähnten potentiellen Einfluss den CSS color allgemein hat, wenn man fill/stroke etc. nicht konkret im .svg definiert - oder eben im .svg fill="context-fill" (etc.) einträgt, um dann via CSS separat darauf zugreifen zu können.
Danke für Deine Ausführungen! Aber ändert das irgendetwas an dem Script/Icon aus Beitrag #8? Ich denke nicht...Schöner Beitrag, aber in diesem Thema von Anfang an unpassend und nicht zutreffend!
lenny2, danke fürs Testen.
Ok, hier was zum Testen; mal die Farb-Otionen durchprobieren, im Anhang ein Icon ohne context-fill im SVG Code als Vergleich zu den Standard Fx Icons, das context-fill ja idR hat; auch Hover probieren:
.bookmark-item[container] {
/*list-style-image: url("icons/YourFolderIcon-ohne.svg") !important;*/
color: cyan !important;
fill: red !important;
}
#bookmarks-menu-button .toolbarbutton-text {
display: flex !important;
}
#bookmarks-menu-button {
/*list-style-image: url(icons/YourFolderIcon-ohne.svg) !important;*/
color: cyan !important;
/* fill: red !important;
-webkit-text-fill-color: purple !important; */
}Das ist der Codes des SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
<path d="M0 64v55h128V29H54V9H0v55zm46-41v6H8V17h38v6zm74 51v37H8V37h112v37z"/>
</svg>Wenn man es per CSS fill einfärben will, sollte der Code so aussehen:
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" fill="context-fill">
<path d="M0 64v55h128V29H54V9H0v55zm46-41v6H8V17h38v6zm74 51v37H8V37h112v37z"/>
</svg>Oh, das ohne fill="context-fill" war Absicht. Ich sollte genauer lesen!
Also, wenn im SVG-Code fill="context-fill" steht, geht das Einfärben per CSS fill: auf jeden Fall.
Natürlich kann man, wenn man das so möchte, auch einem SVG eine feste Farbe zuweisen!
Z.B. in dem man an statt fill="context-fill" im SVG-Code z.B. fill="red" schreibt!
Dann erscheint diese SVG-Grafik auf jeden Fall in rot, egal was in einem CSS so steht.
Aber, weil ich alle SVG-Grafiken per CSS anpassen möchte, schaue ich immer, ob fill="context-fill" im Code steht!
Dann lassen sich so Sachen wie mit dem :hover und andere Spielereien ganz einfach umsetzen.
Mira_Belle Mir ist aufgefallen, dass du JavaScript als Syntax-Sprache für SVG-Grafiken in den Beiträgen gewählt hast. Mit JavaScript hat SVG nichts zu tun. SVG ist ein XML-basiertes Format. Ich habe das entsprechend angepasst. 
Mitleser Ich habe festgestellt, dass Ihr großartiges Skript 
in v140esr nicht funktioniert. Das v140esr wird es noch lange Zeit geben. Es wäre großartig, wenn Sie das beheben könnten, aber es ist optional. Dankeschön.
lenny2, das geht nur mit einer Versionsabfrage (ist das überhaupt möglich?)
Ab 141.0 gibt es diese Änderung:
Der Grund könnte dieser sein (Die Befehle haben sich geändert):
browser-sets.js - mozsearch
Aber ich habe einen Vermerk im Script eingefügt.
// Firefox 141.0+
Für FF 140.0 sollte Zeile 60 ersetzt werden mit: event.target.ownerGlobal.restoreLastClosedTabOrWindowOrSession(); (ungetestet)
