Avatar for Username

חיפוש בתמיכה

יש להימנע מהונאות תמיכה. לעולם לא נבקש ממך להתקשר או לשלוח הודעת טקסט למספר טלפון או לשתף מידע אישי. נא לדווח על כל פעילות חשודה באמצעות באפשרות ״דיווח על שימוש לרעה״.

מידע נוסף

אשכול זה הועבר לארכיון. נא לשאול שאלה חדשה אם יש לך צורך בעזרה.

React app does not render svg icons from external file

  • 1 תגובה
  • 1 has this problem
  • 1 view
  • תגובה אחרונה מאת 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

כל התגובות (1)

hopkinsjj9
hopkinsjj9 Question owner
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.