My .svg is not loaded in Firefox, in chrome it works fine. I'm using css to do this, with the background: url('data:image/svg+xml...) property.
I made a JSFiddle for example, containing all the code.
Edit: I do not want to use base64.
Why does not my .svg work in Firefox?
3
asked by anonymous 12.07.2018 / 15:31
2 answers
3
Firefox interprets character # as a Fragment identifier .
To resolve replace all # within the URL function with %23 .
In your case you should replace:
-
<path fill="#1e7bbf"...by<path fill="%231e7bbf"... - % by% by% by%
See JSFiddle corrected.
.modalFrame {
overflow: hidden;
min-height: 550px;
height: 100%;
width: 100%;
background: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" width="450" height="100" margin="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 100" enable-background="new 0 0 0 0" xml:space="preserve"> <path fill="%231e7bbf" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </path><text fill="%23666" x="40%" y="60%" font-family="\'Lucida Grande\', sans-serif" font-size="24">Carregando</text> </svg>') 0px 0px no-repeat;
background-position: center;
}
body {
font-family: 'Roboto', sans-serif;
overflow: hidden;
background-color: #000000;
text-align: center;
height: 100vh;
}<div class="modalFrame"></div>
12.07.2018 / 16:01
3
Your problem is because of " # " in color fill !
[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '% 23' instead. See link for more details.
If you replace the color value with a " string " type red or black that will work out # by% 23 as in the above quote. Chrome itself gives this alert, although it can interpret, but it seems that FireFox does not accept.
You can test here that at least the newest FireFox will run.
.modalFrame {
overflow: hidden;
height: 50px;
width: 100%;
background: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" width="450" height="100" margin="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 100"> <path fill="red" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </path><text fill="darkgray" x="40%" y="60%" font-family="\'Lucida Grande\', sans-serif" font-size="24">Carregando</text> </svg>') 0px 0px no-repeat;
background-position: center;
}<div class="modalFrame"></div>
12.07.2018 / 15:58