CSS でインライン化された SVG は Chrome/Edge では機能しますが、Firefox では機能しません

coder.in.me

アイコンを表示する次のコードがあります。GitHub アイコンは Firefox では機能しませんが、Chrome と Edge では機能します。不思議なことに、Google アイコンはすべてのブラウザで機能します。

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='#fff' d='M1664 896q0 251-146.5 451.5t-378.5 277.5q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-86-13.5q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-color: dimgray;
}

.google-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='-60 -60 710.117 710.117' %3E%3Cpath fill='%23fff' fill-rule='evenodd' clip-rule='evenodd' d='M516.375,255v-76.5h-51V255h-76.5v51h76.5v76.5h51V306h76.5v-51H516.375z M320.025,341.7l-28.051-20.4%0Ac-10.2-7.649-20.399-17.85-20.399-35.7s12.75-33.15,25.5-40.8c33.15-25.5,66.3-53.55,66.3-109.65c0-53.55-33.15-84.15-51-99.45%0Ah43.35l30.6-35.7h-158.1c-112.2,0-168.3,71.4-168.3,147.9c0,58.65,45.9,122.4,127.5,122.4h20.4c-2.55,7.65-10.2,20.4-10.2,33.15%0Ac0,25.5,10.2,35.7,22.95,51c-35.7,2.55-102,10.2-150.45,40.8c-45.9,28.05-58.65,66.3-58.65,94.35%0Ac0,58.65,53.55,114.75,168.3,114.75c137.7,0,204.001-76.5,204.001-150.449C383.775,400.35,355.725,372.3,320.025,341.7z%0AM126.225,109.65c0-56.1,33.15-81.6,68.85-81.6c66.3,0,102,89.25,102,140.25c0,66.3-53.55,79.05-73.95,79.05%0AC159.375,247.35,126.225,168.3,126.225,109.65z M218.024,568.65c-84.15,0-137.7-38.25-137.7-94.351c0-56.1,51-73.95,66.3-81.6%0Ac33.15-10.2,76.5-12.75,84.15-12.75s12.75,0,17.85,0c61.2,43.35,86.7,61.2,86.7,102C335.324,530.4,286.875,568.65,218.024,568.65z%0A'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-color: red;
}
coder.in.me

それを見つけた。# は %23 に置き換える必要があります

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

IE CSSは機能しませんが、Firefoxでは機能します

分類Dev

動的に作成されたSVGはFirefoxでは機能しませんが、Chromeでは機能します

分類Dev

SVGクリップパスはChromeで機能しますが、FirefoxやSafariでは機能しません

分類Dev

CSS @ font-faceはFirefoxでは機能しませんが、ChromeとIEでは機能します

分類Dev

CSSルールはIEでは機能しますが、Chrome / Firefoxでは機能しません

分類Dev

背景色CSSはSafariでは機能しませんが、Chrome、Firefoxでは正常に機能します

分類Dev

Hover.cssライブラリアニメーションはFirefoxまたはEdgeでは機能しませんが、Chromeでは機能しますか?

分類Dev

CSSアニメーションはChromeで機能しますが、FireFoxでは機能しません

分類Dev

JS / CSSコードはChromeで機能しますが、Firefoxでは機能しません

分類Dev

CSSクリップパスはFirefoxで機能しますが、Chromeでは機能しません

分類Dev

cssで指定されたtr:commandlinkの色は機能していませんが、インラインスタイルでは機能しています

分類Dev

SVGホバーはFirefoxでは機能しません

分類Dev

CSS はライブで更新されませんが、ステージングでは機能します

分類Dev

CSS「d」パス-属性はSafari、FireFoxでは機能しません

分類Dev

css- @ mediaはFirefoxとIEでは機能しません

分類Dev

css margin:0autoはFirefoxでは機能しません

分類Dev

css'clip-path 'はFirefoxでは機能しません

分類Dev

クリップパスsvgは画像では機能しますが、divでは機能しません

分類Dev

SVGアニメーションはChromeでは正しく機能しますが、Firefoxでは機能しません

分類Dev

Gzipはhtmlで機能しますが、javascriptまたはcssでは機能しません(Apache)

分類Dev

「innerText」はIEでは機能しますが、Firefoxでは機能しません

分類Dev

jQueryはFirefoxでは機能しませんが、Chromeでは機能します

分類Dev

JQueryはFirefoxでは機能しませんが、Chromeでは機能します

分類Dev

.sortはFirefoxでは機能しませんが、Chromeでは機能します

分類Dev

AngularjsはChromeでは機能しませんが、Firefoxでは機能します

分類Dev

CSSはFirefox、IE、Edgeには読み込まれませんが、Chromeでは正常に機能します

分類Dev

CSS position:fixedはヘッダーでは機能しますが、フッターでは機能しません

分類Dev

CSSコードは一部では機能しますが、他の部分では機能しません

分類Dev

CSSはHTMLでは正常に機能しますが、Razor構文では機能しません

Related 関連記事

  1. 1

    IE CSSは機能しませんが、Firefoxでは機能します

  2. 2

    動的に作成されたSVGはFirefoxでは機能しませんが、Chromeでは機能します

  3. 3

    SVGクリップパスはChromeで機能しますが、FirefoxやSafariでは機能しません

  4. 4

    CSS @ font-faceはFirefoxでは機能しませんが、ChromeとIEでは機能します

  5. 5

    CSSルールはIEでは機能しますが、Chrome / Firefoxでは機能しません

  6. 6

    背景色CSSはSafariでは機能しませんが、Chrome、Firefoxでは正常に機能します

  7. 7

    Hover.cssライブラリアニメーションはFirefoxまたはEdgeでは機能しませんが、Chromeでは機能しますか?

  8. 8

    CSSアニメーションはChromeで機能しますが、FireFoxでは機能しません

  9. 9

    JS / CSSコードはChromeで機能しますが、Firefoxでは機能しません

  10. 10

    CSSクリップパスはFirefoxで機能しますが、Chromeでは機能しません

  11. 11

    cssで指定されたtr:commandlinkの色は機能していませんが、インラインスタイルでは機能しています

  12. 12

    SVGホバーはFirefoxでは機能しません

  13. 13

    CSS はライブで更新されませんが、ステージングでは機能します

  14. 14

    CSS「d」パス-属性はSafari、FireFoxでは機能しません

  15. 15

    css- @ mediaはFirefoxとIEでは機能しません

  16. 16

    css margin:0autoはFirefoxでは機能しません

  17. 17

    css'clip-path 'はFirefoxでは機能しません

  18. 18

    クリップパスsvgは画像では機能しますが、divでは機能しません

  19. 19

    SVGアニメーションはChromeでは正しく機能しますが、Firefoxでは機能しません

  20. 20

    Gzipはhtmlで機能しますが、javascriptまたはcssでは機能しません(Apache)

  21. 21

    「innerText」はIEでは機能しますが、Firefoxでは機能しません

  22. 22

    jQueryはFirefoxでは機能しませんが、Chromeでは機能します

  23. 23

    JQueryはFirefoxでは機能しませんが、Chromeでは機能します

  24. 24

    .sortはFirefoxでは機能しませんが、Chromeでは機能します

  25. 25

    AngularjsはChromeでは機能しませんが、Firefoxでは機能します

  26. 26

    CSSはFirefox、IE、Edgeには読み込まれませんが、Chromeでは正常に機能します

  27. 27

    CSS position:fixedはヘッダーでは機能しますが、フッターでは機能しません

  28. 28

    CSSコードは一部では機能しますが、他の部分では機能しません

  29. 29

    CSSはHTMLでは正常に機能しますが、Razor構文では機能しません

ホットタグ

アーカイブ