Cor de fundo padrão do elemento raiz SVG

134

Gostaria de definir uma cor de plano de fundo padrão para todo o documento SVG, para vermelho, por exemplo.

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

A solução acima funciona, mas infelizmente a propriedade background do atributo style não é padrão: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties e, portanto, é removida durante o processo de limpeza com SVG Limpador.

Existe outra maneira de declarar essa cor de fundo?

Delapouite
fonte
1
Provavelmente também há um bug no SVG Cleaner? Ele remove blocos de estilo in-line, bem como, embora eles são padrão: w3.org/TR/SVG/styling.html#StylingWithCSS
Volker E.

Respostas:

120

SVG 1.2 O Tiny possui preenchimento de janela Não tenho certeza de quão amplamente implementada essa propriedade é, pois a maioria dos navegadores está segmentando o SVG 1.1 no momento. Opera implementa FWIW.

Uma solução mais entre navegadores atualmente seria colar um <rect>elemento com largura e altura de 100% e preencher = "vermelho" como o primeiro filho do <svg>elemento, por exemplo:

<rect width="100%" height="100%" fill="red"/>
Robert Longson
fonte
24
O hack correto funciona, mas assume que a taxa de proporção do svg sempre corresponde à viewport que obtém, portanto não preenche a viewport inteira em todas as situações.
Erik Dahlström
1
quando a proporção não corresponder à janela de exibição, o uso width="10000%" height="10000%"poderá corrigi-la. se não, então adicionar alguns zeros
mulllhausen
1
Infelizmente, a adição de um valor tão alto quanto 10000000% não funcionou. alguma outra sugestão?
Crashalot
Uma viewport-fillsolicitação de recebimento de caniuse abandonada : github.com/Fyrd/caniuse/issues/2186 Por que por que eles deixaram o SVG morrer?
Ciro Santilli quinta-feira
47

Encontrado isso funciona no Safari. O SVG apenas colore com cor de fundo onde a caixa delimitadora de um elemento cobre. Portanto, atribua uma borda (traço) com um limite de zero pixel. Ele preenche tudo para você com sua cor de fundo.

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

cwingrav
fonte
5
Isso faz com que todos os traços do subelemento também tenham largura zero, portanto, não é uma boa opção "em segundo plano".
duanev
20

Deixe-me relatar uma solução muito simples que encontrei, que não está escrita nas respostas anteriores. Eu também queria definir o plano de fundo em um SVG, mas também quero que isso funcione em um arquivo SVG independente.

Bem, essa solução é realmente simples, na verdade o SVG suporta tags de estilo, para que você possa fazer algo como

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>
Gianluca Casati
fonte
Solução agradável e simples!
Conceptdeluxe
1
Embora isso funciona, em geral, em todos os navegadores, definindo o background-colordo <svg>elemento fará com que o IE11 tornar a cor de fundo também fora da área definida com o viewBoxatributo. Isso não importa ao usar widthe heightatributos.
Conceptdeluxe 13/05/19
@conceptdeluxe observação interessante, em teoria, o estilo codificado dentro de svg deve ser aplicado somente dentro de svg. No entanto, definir largura e altura é quase sempre necessário.
Gianluca Casati
Existe uma diferença entre <svg style"...."></svg>e <svg><style>...</style></svg>, supondo que a <style>tag esteja no nível superior? Caso contrário, essa resposta parecerá a solução original do OP, reembalada sob uma sintaxe diferente. (Mas talvez esta solução sobrevive SVG Cleaner, enquanto <svg style="..."></svg>não?)
Labrador
@Labrador Eu estava procurando uma solução, vi essa pergunta, encontrei uma maneira de resolvê-la e a compartilhei. Não sei, parece que apenas os atributos relatados neste w3.org/TR/SVG/styling.html#SVGStylingProperties são suportados. Por outro lado, a solução que propus funciona e também gosto, porque você pode estilizar outras tags SVG, como path, rect, etc. A principal característica para mim é que ela também funciona para SVGs independentes.
Gianluca Casati
10

Atualmente, estou trabalhando em um arquivo como este:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

E eu tentei colocar isso em style.css:

svg {
  background: #bf1f1f;
}

Está funcionando no Chromium e Firefox, mas não acho que seja uma boa prática . O visualizador de imagens EyeOfGnome não a processa e o Inkscape usa um espaço para nome especial para armazenar um plano de fundo:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

Bem, parece que o elemento raiz SVG não faz parte dos elementos pintáveis nas recommandações SVG.

Então, eu sugiro usar a solução "correta" fornecida por Robert Longson, porque acho que não é um simples "hack". Parece ser a maneira padrão de definir um plano de fundo com o SVG.

Charles-Édouard Coste
fonte
4
<rect width = "100%" height = "100%" fill = "white" /> no início resolve o problema de eog
nvrandow
2

Outra solução alternativa pode ser usar <div>o mesmo tamanho para quebrar o <svg>. Depois disso, você poderá se inscrever "background-color"e "background-image"isso afetará o svg.

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>
muyueh
fonte
12
Esta solução é um hack de HTML. E pode funcionar apenas se você estiver usando SVG em uma página da web. Esta não é uma verdadeira solução SVG.
Charles-Édouard Coste 23/03
A cor de plano de fundo do SVG é emprestada do componente em que está localizado. (Como svg empresta a cor da página e a cor padrão da página é branca). De alguma forma, não acho que seja um hack.
clinux 27/11/2015
@clinux: O que Charles estava tentando dizer é que ele funciona perfeitamente para renderização de páginas da Web, mas suponha que você queira usar o mesmo svg que uma imagem com extensão .svg para renderizá-la em outro lugar, pode não funcionar.
Arunkumar Srisailapathi