Como posicionar alças Bézier com coordenadas exatas no Inkscape

Os campos de coordenadas da ferramenta Nó alteram a posição de um nó selecionado. Uma alça Bézier é um ponto de controle separado que dá forma à curva ao lado desse nó. Portanto, inserir as coordenadas pretendidas para a alça na barra de ferramentas altera a parte errada da geometria. O Guia para iniciantes do Inkscape descreve explicitamente esses campos como coordenadas do nó selecionado. Opções da ferramenta Nó

Use a ferramenta Nó para identificar visualmente a curva: pressione N, selecione o caminho e selecione um nó. As alças aparecem como pequenos círculos conectados ao nó por linhas finas. Esses círculos são os pontos cujas posições numéricas você editará. Editando caminhos com a ferramenta Nó

Um segmento Bézier cúbico tem um nó inicial, dois pontos de controle e um nó final. Nos dados do caminho SVG, o nó inicial vem do comando anterior. Em seguida, um C maiúsculo fornece os dois controles e o ponto final, nessa ordem. W3C: Comandos de curva Bézier cúbica

Considere este valor ilustrativo do atributo d:

M 40 120 C 40 40 200 40 200 120

Leia os números da seguinte forma:

Parte	Coordenadas	Significado
M 40 120	(40, 120)	Nó inicial
Primeiro par após C	(40, 40)	Alça de saída do nó inicial
Segundo par após C	(200, 40)	Alça de entrada do nó final
Terceiro par após C	(200, 120)	Nó final

A regra prática é agrupar os seis valores após C em três pares antes de editar qualquer coisa. Para reposicionar uma alça e preservar os dois nós, altere apenas o par correspondente. O tutorial SVG da MDN documenta a mesma ordem e explica como os controles determinam a direção da curva perto de cada ponto final. MDN: Caminhos

Para uma primeira tentativa controlada, use este documento SVG completo. Salve-o como exact-curve.svg em um editor de texto simples e depois abra-o no Inkscape. Ele contém um único caminho comum, sem grupos, transformações ou efeitos de caminho.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160"
     viewBox="0 0 240 160">
  <path id="curve"
        d="M 40 120 C 40 40 200 40 200 120"
        fill="none"
        stroke="black"
        stroke-width="2" />
</svg>

A estrutura XML do exemplo e os cálculos de coordenadas abaixo foram verificados com Python. A interação com o aplicativo para computador não foi executada.

1. Selecione a curva no Inkscape.
2. Abra o Editor XML com Ctrl+Shift+X, o atalho padrão documentado.
3. Selecione na árvore XML o elemento de caminho identificado por id="curve".
4. Selecione o atributo d e edite o valor do atributo.
5. Aplique o valor com Ctrl+Enter ou com o controle Definir atributo da caixa de diálogo. Esses comandos estão documentados na própria referência de atalhos do Inkscape. Referência de teclado e mouse do Inkscape

Por exemplo, altere a primeira alça de (40, 40) para (70, 30) inserindo este valor de atributo:

M 40 120 C 70 30 200 40 200 120

Cole apenas a string de dados do caminho no campo de valor — não inclua d=, aspas nem um elemento <path> completo. Mantenha inalterados o par inicial, o segundo par de controle e o par final. Assim, você faz uma edição de uma única alça que pode inspecionar facilmente.

Volte para a ferramenta Nó e selecione o nó inicial. Confira visualmente a nova direção da alça e depois inspecione novamente o valor d para verificar os números. Em um contorno existente com vários segmentos, preserve os comandos ao redor e edite apenas o par de controle relevante; substituir todo o atributo por este exemplo curto substituiria o contorno inteiro.

As coordenadas dos dados do caminho usam unidades do usuário SVG. O viewBox e as transformações do documento determinam como essas unidades correspondem ao desenho visível. O sistema de coordenadas SVG inicial tem a origem no canto superior esquerdo, com X aumentando para a direita e Y aumentando para baixo. W3C: Sistemas de coordenadas, transformações e unidades

No exemplo fornecido, a área de visualização de 240 × 160 e viewBox="0 0 240 160" permitem um mapeamento direto. O movimento de (40, 40) para (70, 30) posiciona o ponto de controle 30 unidades mais à direita e 10 unidades mais acima. Essas são coordenadas ilustrativas de desenho, não uma prescrição para o formato de um personagem específico.

Em um documento existente, inspecione o caminho e seus grupos pais para encontrar atributos transform antes de considerar as coordenadas locais como posições na página. Como cálculo ilustrativo, um único translate(30,20) mapeia uma alça local em (70,30) para (100,50) no sistema de coordenadas pai. Para chegar a (100,50) com essa translação, insira localmente (70,30). Escala, rotação e transformações adicionais dos elementos ancestrais exigem levar em conta o mapeamento completo. W3C: Sistemas de coordenadas e transformações

O c minúsculo armazena deslocamentos em relação ao ponto inicial do segmento. Os três pares usam esse mesmo ponto inicial; eles não representam movimentos sucessivos de um controle para o próximo. O C maiúsculo armazena coordenadas absolutas no sistema de coordenadas do usuário atual. W3C: Comandos de curva Bézier cúbica

No exemplo original, subtraia o nó inicial (40,120) de cada ponto subsequente:

Ponto	Posição absoluta	Deslocamento relativo
Primeira alça	(40,40)	(0,-80)
Segunda alça	(200,40)	(160,-80)
Ponto final	(200,120)	(160,0)

Portanto, o valor equivalente do atributo é:

M 40 120 c 0 -80 160 -80 160 0

Não basta colocar c em maiúscula e manter esses números: isso altera o significado deles. Ao editar um caminho relativo mais longo, calcule primeiro o ponto inicial do segmento atual.

Um segmento S omite seu primeiro ponto de controle. Após um segmento cúbico, o SVG deriva esse controle refletindo o controle final do segmento anterior em relação ao nó compartilhado. Para especificar ambos os controles de forma independente, expanda o atalho para um segmento C explícito, preservando inicialmente o primeiro controle calculado. MDN: Caminhos

Os tipos de nó do Inkscape impõem restrições à edição interativa posterior. Nós de canto permitem mover as alças de forma independente. Nós suaves mantêm as duas alças e o nó alinhados. Nós simétricos também mantêm as alças a distâncias iguais. Nós de suavização automática ajustam automaticamente as distâncias das alças quando o nó se move. Sobre os tipos de nó

Escolha o comportamento desejado para o nó antes do posicionamento numérico final. Para controles especificados de forma independente, um nó de canto é uma opção útil. Para uma junção fluida, planeje coordenadas compatíveis nos dois lados do nó compartilhado e confira os valores finais após qualquer conversão do tipo de nó.

Por exemplo, suponha que um nó compartilhado esteja em (200,120) e seu controle de entrada em (200,40). Um controle de saída em (200,200) é o reflexo desse ponto em relação ao nó: 2 × (200,120) − (200,40). Esse cálculo ilustrativo resulta em vetores de alça iguais e opostos. Ele oferece uma verificação concreta de coordenadas para uma junção simétrica.

Faça estas verificações em ordem:

1. Confirme o elemento. Verifique o ID do caminho selecionado antes de alterar seu atributo.
2. Identifique o par. Se necessário, anote o nó inicial, o primeiro controle, o segundo controle e o ponto final.
3. Leia a letra do comando. Determine se os números são absolutos, relativos ou abreviados.
4. Confira o mapeamento de coordenadas. Inspecione viewBox, a transformação do caminho e as transformações dos elementos pais.
5. Confira as edições posteriores. Inspecione novamente as coordenadas depois de arrastar as alças ou alterar os tipos de nó.
6. Preserve o valor original. Guarde uma cópia da string completa d para poder restaurá-la caso uma edição altere segmentos não pretendidos.

Para um trabalho preciso no contorno de um personagem, termine conferindo tanto o contorno visível quanto as coordenadas de controle armazenadas. Quando o tipo de comando e o sistema de coordenadas estiverem claros, posicionar uma alça com exatidão se torna uma pequena edição rastreável: identifique o segmento, altere o par desejado e verifique o resultado.

• Opções da ferramenta Nó — Guia para iniciantes do Inkscape
• Editando caminhos com a ferramenta Nó — Guia para iniciantes do Inkscape
• Sobre os tipos de nó — Guia para iniciantes do Inkscape
• Referência de teclado e mouse do Inkscape — fonte da documentação
• Caminhos — SVG 2, W3C
• Sistemas de coordenadas, transformações e unidades — SVG 2, W3C
• Caminhos — MDN Web Docs