Mozilla VPN is currently experiencing an outage. Our team is actively working to resolve the issue. Please check the status page for real-time updates. Thank you for your patience.

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Etsi tuesta

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Lue lisää

Ketju on arkistoitu. Esitä kysymys, jos tarvitset apua.

React app does not render svg icons from external file

  • 1 vastaus
  • 1 henkilöllä on sama ongelma
  • 1 näyttö
  • Viimeisin kirjoittaja hopkinsjj9

hopkinsjj9
hopkinsjj9
more options

My React app renders in Chrome and Android, but not in Firefox. I use an external reference to a static svg file.

<use href="/static/media/icons.2ce40b6f.svg#sun" class="srkBlack" transform="translate(236.4941000749839 64.73127047444365)scale(.4)"></use>

icons.2ce40b6f: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="sun" viewBox="0 0 200 200"> 

 <path style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.4;stroke-opacity:1"
 d="m 16.136067,15.83614 h 0.09665 v 0.09665 h -0.09665 z m -9.6934884,0.263275 a 9.6572458,9.6572463 0 1 0 19.3144874,0 9.6572458,9.6572463 0 1 0 -19.3144874,0 m 8.6915274,0 a 0.96572559,0.96572565 0 1 0 1.931451,0 0.96572559,0.96572565 0 1 0 -1.931451,0" />

</symbol> </defs> </svg>

css: .srkBlack { 

 fill:black; 
 stroke:black;

}

Any help would be appreciated

My React app renders in Chrome and Android, but not in Firefox. I use an external reference to a static svg file. <use href="/static/media/icons.2ce40b6f.svg#sun" class="srkBlack" transform="translate(236.4941000749839 64.73127047444365)scale(.4)"></use> icons.2ce40b6f: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="sun" viewBox="0 0 200 200"> <path style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.4;stroke-opacity:1" d="m 16.136067,15.83614 h 0.09665 v 0.09665 h -0.09665 z m -9.6934884,0.263275 a 9.6572458,9.6572463 0 1 0 19.3144874,0 9.6572458,9.6572463 0 1 0 -19.3144874,0 m 8.6915274,0 a 0.96572559,0.96572565 0 1 0 1.931451,0 0.96572559,0.96572565 0 1 0 -1.931451,0" /> </symbol> </defs> </svg> css: .srkBlack { fill:black; stroke:black; } Any help would be appreciated

Kaikki vastaukset (1)

hopkinsjj9
hopkinsjj9 Kysymyksen kysyjä
more options

UPDATE: I was able to fix this problem by sending the Icons.svg file thru http://svg.enshrined.co.uk/.

There were a few missing tags that chrome forgave, but Firefox did not.