Coordenadas no SVG

[Odair Oliveira_163654 2]

Boa tarde!

Estou desenvolvendo um gráfico com SVG, PHP, MySql e CSS, quase mesmo esquema dos gráficos do Google Charts, porém estou com um problema nas coordenadas do SVG.

 

Quando coloco o valor de x1 e y1 iguais a 0 ao invés de meu gráfico começar da parte de baixo (o que seria comum) ele começa da parte de cima (O.o).

 

Tem alguma forma de meu gráfico começar da parte de baixo (inverter as coordenadas)?

(Abaixo segue uma imagem de como o gráfico está)

[Maujor 144]

O sistema cartesiano de coordenas tem sua origem no canto inferior esquerdo.

 

O sistema de coordenadas para a web tem sua origem no canto superior esquerdo e SVG assim como CSS e outras tecnologias web adotam este sistema.

 

Para forçar o sistema cartesiano SVG a ser igual ao sistema cartesiano matemático você pode usar as funcionalidades para transfomações SVG.

 

Declare:

<g transform="translate(0,h)"> 
<g transform="scale(1,-1)">

sendo g o container geral da sua imagem SVG e h a altura total da imagem.

Essas transformações; (translate) movimenta a origem para o canto inferior e (scale) espelha a altura.

[Odair Oliveira_163654 2]

Puts, muito obrigado! Funcionou certinho! :D

Testei aqui e funcionou perfeitamente, muito obrigado Maujour! (Parabéns pelo blog tbm rs).

Só que teve um pequeno problema, o meu gráfico contém textos também, e o texto ficou invertido, tem alguma forma de arrumar isso?

[Maujor 144]

Poste, ou hospede a marcação SVG para eu analisar.

[Odair Oliveira_163654 2]

Minha marcação SVG está da forma abaixo:

O link para visualização do gráfico em funcionamento está hospedado aqui -> http://chiptronic.com.br/testes/grafico

[inline]

<g class="grupo_mes" id="<?php echo $mes ?>">

<!--linha divisoria-->

<line stroke="#999" stroke-width="0.3" x1="<?php echo $f ?>" y1="0" x2="<?php echo $f ?>" y2="200"/>

<!--texto com nome do mes-->

<text x="<?php echo $xf-80 ?>" y="220"><?php echo $mes ?></text>

<g transform="translate(0,200)">

<g transform="scale(1,-1)">

<!--linha de fevereiro-->

<line class="linha-grafico" x1="<?php echo $f ?>" y1="<?php echo $qtd22 ?>" x2="<?php echo $xf ?>" y2="<?php echo $visit ?>"/>

<!--círculo de fevereiro-->

<circle fill="#662D91" cx="<?php echo $xf ?>" cy="<?php echo $visit ?>" r="4" />

<!--texto-->

<text class="texto-visitas" x="<?php echo $xf+10 ?>" y="<?php echo $visit-5 ?>"><?php echo $qtd ?> Visitas</text>

</g>

</g>

</g>

[/inline]

[Maujor 144]

1-) Use um único container g para as duas transformações:

<g transform="translate(0,200) scale(1,-1)"> 

....

</g>

2-) Retire todos as textos de visitas do container g e ajuste os valores de y dos textos:

O valor y de todos os meses precisa ser alterado para y=190.

 

Veja o exemplo:

<g class="grupo_mes" id="Setembro/2013">
<!--linha divisoria-->
<line stroke="#999" stroke-width="0.3" x1="100" y1="0" x2="100" y2="200"></line>
<!--texto com nome do mes-->
<text x="120" y="190">Setembro/2013</text>
<!--texto-->
<text class="texto-visitas" x="210" y="115">8000 Visitas</text>

<g transform="translate(0,200) scale(1,-1)">

....

</g>

 

NOTA: Quando postar URL do código NÂO PRECISA postar o código.

[Odair Oliveira_163654 2]

Cara, funcionou perfeitamente, muito obrigado pela ajuda :)
Segue o link com o exemplo em funcionamento http://chiptronic.com.br/testes/grafico/index.php