coordenadas viewports e viewboxes clipping de viewports transformação de coordenadas Helder da Rocha

Tamanho: px

Começar a partir da página:

Download "coordenadas viewports e viewboxes clipping de viewports transformação de coordenadas Helder da Rocha"

Maria dos Santos Natal Abreu
6 Há anos
Visualizações:

1 coordenadas viewports e viewboxes clipping de viewports transformação de coordenadas Helder da Rocha (helder@)

2 Coordenadas e viewports A área onde o gráfico SVG é desenhado chama se SVG Viewport Contém a altura e largura (em pixels) Pode conter uma unidade (px, cm, in, etc.) O tamanho do viewport pode ser especificado explicitamente (atributos height e width) ou calculado automaecamente O cálculo é feito a parer da maior largura e altura dos objetos conedos no documento, se height e width não eseverem definidos O viewport define dois sistemas de coordenadas, que são inicialmente idênecos (mesma origem, unidade, dimensões) sistema de coordenadas do viewport (viewport space) sistema de coordenadas do usuário (user space) Novas coordenadas podem ser estabelecidas através de transformações do sistema do usuário, pelos atributos viewbox, em <svg>, <symbol>, <marker>, <paqern>, <view> transform em elementos gráficos ou containers (grupos) 2

Transformações O código abaixo ilustra uma transformação de um sistema de coordenadas, em relação ao sistema original O novo sistema tem sua origem na posição 50,50 do sistema original <svg

3 Transformações O código abaixo ilustra uma transformação de um sistema de coordenadas, em relação ao sistema original O novo sistema tem sua origem na posição 50,50 do sistema original <svg width="400px" height="150px" xmlns=" version="1.1"> <g fill="none" stroke="black" stroke width="3" > <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="150" /> <g> <text x="30" y="30"... > ABC (sistema de coords original) </text> <g transform="translate(50,50)"> <g fill="none" stroke="red" stroke width="3" > <line x1="0" y1="0" x2="50" y2="0" stroke="red" /> <line x1="0" y1="0" x2="0" y2="50" /> <text x="30" y="30"... > ABC (sistema de coords deslocado em 50,50) </text> 3

4 Rotação e redimensionamento Este exemplo ilustra dois sistemas de coordenadas novos Com deslocamento 50,30 e rotação de 30 graus (em relação à origem do VP) Com deslocamento 40,200 e aumento de 50% <svg width="250px" height="400px" version="1.1" xmlns=" <g fill="none" stroke="black" stroke width="3" > <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> <g transform="translate(50,30)"> <g transform="rotate(30)"> <text x="0" y="0"...>abc (rotate)</text> <g transform="translate(40,200)"> <g transform="scale(1.5)"> <text x="0" y="0"...>abc (scale)</text> 4

Cisalhamento (distorção tangencial) O cisalhamento (skew) distorce o sistema de coordenadas por uma tangente horizontal ou verecal <svg width="250px" height="400px".

5 Cisalhamento (distorção tangencial) O cisalhamento (skew) distorce o sistema de coordenadas por uma tangente horizontal ou verecal <svg width="250px" height="400px"... > <g fill="none" stroke="black" stroke width="3" > <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> <g transform="translate(30,30)"> <g transform="skewx(30)"> <text x="0" y="0"...>abc (skewx)</text> <g transform="translate(30,170)"> <g transform="skewy(30)"> <text x="0" y="0...>abc (skewy)</text> Distorção de cisalhamento (graus) 5

6 Atributo transform O atributo transform pode receber uma ou mais transformações separadas por vírgulas ou espaço, que podem ser matrix(a 11,a 12,a 13,a 21,a 22,a 23 ) expressa um conjunto de transformações combinadas como uma matriz 3x3 (úlema linha da matriz é 0, 0, 1) translate(t x ) ou translate(t x, t y ) desloca a origem scale(s x ) ou scale(s x, s y ) redimensiona rotate(θ) ou rotate(θ, c x, c y ) gira o sistema θ graus sobre a origem ou sobre o centro c x,c y skewx(θ) e skewy(θ) cisalhamento de θ graus As transformações abaixo são equivalentes <g transform="translate( 10, 20)"> <g transform="scale(2)"> <g transform="rotate(45)"> <g transform="translate(5,10)"> <! graphics elements go here > </g> <g transform="translate( 10, 20) scale(2) rotate(45) translate(5,10)"> <! graphics elements go here > </g> 6

Atributo viewbox Define uma caixa no qual o conteúdo deve ocupar todo o espaço Estabelece um retângulo nas coordenadas do usuário

ser usado para garaner que as proporções serão manedas Lista de quatro atributos min x, min y, largura, altura <svg viewbox="0 0

..> <rect x="0" y="0" width="1500" height="1000" fill="yellow" stroke="blue" stroke width="12" /> <path fill="red" d="m 750,100 L

7 Atributo viewbox Define uma caixa no qual o conteúdo deve ocupar todo o espaço Estabelece um retângulo nas coordenadas do usuário que deve ser mapeado aos limites estabelecidos pelo conteúdo: o que passar é cortado (clipping) Atributo preserveaspectrafo pode ser usado para garaner que as proporções serão manedas Lista de quatro atributos min x, min y, largura, altura <svg viewbox=" " preserveaspectratio="none"...> <rect x="0" y="0" width="1500" height="1000" fill="yellow" stroke="blue" stroke width="12" /> <path fill="red" d="m 750,100 L 250,900 L 1250,900 z"/> <text x="100" y="600"... >Stretch to fit</text> <svg viewbox=" " preserveaspectratio="none" xmlns=" version="1.1"> <rect x="0" y="0" width="1500" height="1000" />... 7

Documentos relacionados

caminhos linhas, curvas e arcos Helder da Rocha

caminhos linhas, curvas e arcos Helder da Rocha (helder@) Caminhos Caminhos representam o contorno de uma figura São definidos por seqüências de comandos (representados por letras) e coordenadas (pares