4

Meu .svg não é carregado no Firefox, no chrome ele funciona normal. Estou usando css para fazer isso, com a propriedade background: url('data:image/svg+xml...). Fiz um JSFiddle para exemplificar, contendo todo o código.

Edit: Não quero utilizar base64.

1
  • Eu tive esse mesmo problema agora em um projeto que faço parte. Eu estava definindo uma largura no css em porcentagem(%) e o firefox estava vendo como uma imagem sem dimensão. Alterei de porcentagem para um valor em "rem" e funcionou. Commented 18/01/2023 às 15:18

2 Respostas 2

5

Seu problema é por causa do " # " na cor do 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 https://www.chromestatus.com/features/5656049583390720 for more details.

Se vc substituir o valor das cores por uma "string" tipo red ou black que vai funcionar ou trocar # por %23 como sugerido pelo próprio warning acima. As versões antigas do Chrome dão esse alerte, apesar de conseguir renderizar a cor, mas parece que o FireFox mais antigo nem a cor chega a mostrar.

Pode testar aqui que pelo nos nos FireFox mais novo vai rodar.

.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>

2
  • Obrigado, ajudou bastante Commented 12/07/2018 às 17:26
  • @GilthayllorSousa dmr tmj
    – hugocsl
    Commented 12/07/2018 às 17:33
4

O Firefox interpreta o caratére # como um Fragment identifier.

Para resolver substitua todos os # dentro da função URL por %23.

No seu caso você deve substituir:

  • <path fill="#1e7bbf"... por <path fill="%231e7bbf"...
  • <text fill="#666" por <text fill="%23666"

Veja o JSFiddle corrigido.

.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>

fonte: SVG data image not working on Firefox

2
  • 1
    Entendi, valeu pela ajuda amigo! Commented 12/07/2018 às 17:26
  • Na verdade se o teu doctype estiver com charset utf-8, ou se vc disser no seu CSS @charset "UTF-8"; creio que não necessitará trocar isso manualmente, ele automaticamente interpretará o # para %23. Commented 12/09/2019 às 11:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .