Já faz um tempo desde que eu introduzi uma nova sintaxe para o css-doodle projeto para resolver meus próprios problemas. Embora não tenha certeza de que seria útil em outro lugar, preciso fazer algumas anotações antes de esquecer os detalhes.

Motivação

Sempre acho um pouco difícil escrever SVG sem a ajuda de ferramentas ou bibliotecas adicionais. O principal problema para mim é que o código SVG cresce muito rápido para acompanhar. Se olharmos mais de perto como a maioria dos SVGs são escritos, você notará que o código cresce em duas dimensões: atributos e Tag.

ATRIBUTOSTAG

A partir dessa perspectiva, isso pode explicar por que escrever HTML é relativamente mais fácil do que SVG. Há muito menos atributos em elementos HTML, então o código HTML cresce aproximadamente por tags em 1 dimensão.

HTML poderia ter se tornado como SVG se CSS não existisse. Podemos ver isso em vários atributos obsoletos, como bgColor, align, borderetc

<div bgColor="#ff0"></div>

Hoje em dia, porém, ainda é possível que o HTML cresça em dois dimensões se usar ferramentas como Vento de caudaem que os nomes de classe predefinidos longos são atributos estendidos para elementos HTML.

Sintaxe CSS

Felizmente, nem todos os atributos SVG são escritos apenas em tags. o
atributos de apresentação

também pode ser colocado em folhas de estilo como propriedades CSS normais.

path {
  stroke: rebeccapurple;
  stroke-dasharray: 5 1 5;
}

O que eu amo sobre CSS é sua legibilidade. Não há aspas desnecessárias em torno de valores de propriedade, mesmo quando separadas por espaços. E o código CSS sempre se expande de cima para baixo se seguir as práticas recomendadas.

E se eu pudesse escrever todos os atributos SVG em CSS?

Apesar do fato de que é improvável mudar a natureza bidimensional do código SVG para unidimensional ao mesmo tempo para torná-lo isomórfico transformando para frente e para trás, seria pelo menos agradável escrever SVG com a sintaxe do CSS.

svg {
  viewBox: 0 0 10 10;
}

Isso parece funcionar. Tags são escritas como seletores CSS e atributos como propriedades CSS. Para elementos SVG filhos, podemos usar o próximo Sintaxe de aninhamento de CSS. No entanto, eu preferiria o SCSS maneira de aninhar porque não tenho as mesmas preocupações com os mecanismos do navegador, conforme descrito em Este artigo.

svg {
  viewBox: 0 0 100 100;
  path {
    d: M 50 1 1 50 50 99 99 50 z;
    stroke: rebeccapurple;
  }
}

Desafios de análise

O processo de conversão da sintaxe SVG para CSS não foi tão suave quanto o esperado devido aos vários formatos de nomes e valores de atributos SVG. Portanto, tive que estender um pouco a sintaxe CSS.

1. Atributos separados por dois pontos

<use xlink:href="#circle" />

Como o CSS usa o símbolo de dois pontos como separador em uma declaração, ele deve ser tratado especialmente se o nome do atributo também contiver um cólon personagem.

use {
  xlink:href: #circle;
}

2. Ponto e vírgula na animação SVG

<animate value="25,20,50,75; 45,55,50,75" />

Em CSS, um ponto e vírgula é usado para marcar o fim de uma declaração. Em SVG, por outro lado, os pontos e vírgulas são usados ​​para agrupar valores de animação. Como você pode dizer a diferença entre os dois tipos de ponto e vírgula quando eles são colocados juntos?

animate {
  value: 25,20,50,75; 45,55,50,75;
}

3. Texto

<text>hello world</text>

Não há como especificar um nó de texto na propriedade CSS, então preciso definir um novo para conter o conteúdo do nó de texto em relação a pseudo-elemento em CSS.

text {
  content: hello world;
}

4. Estilos embutidos

<circle style="animation: move .2s; fill: red" />

Usando o style palavra-chave para representar cada propriedade CSS é a melhor maneira que encontrei para converter estilos inline. Eles normalmente não são incentivados a usar, então parece razoável torná-los um pouco mais detalhados.

circle {
  style animation: move .2s;
  style fill: red;
}

É assim que o código para um gráfico simples se parecerá:

svg {
  viewBox: 0 0 10 10;
  stroke: black;
  stroke-width: .1;
  rect {
    x: 8;
    y: 8;
    width: 1;
    height: 1;
    fill: yellow;
    style transform-box: fill-box;
    transform-origin: center;
    transform: rotate(45)
  }
  circle {
    fill: deepskyblue;
    cx: 4;
    cy: 4;
    r: 3
  }
}

Alguns novos recursos

Conforme eu experimentava mais, percebi que vários novos recursos tornariam a nova sintaxe mais amigável.

1. Desestruturação de Atributos

Alguns atributos podem ser agrupados logicamente em pares, por isso é conveniente colocá-los na mesma linha, separados por vírgulas.

/* <rect width="50%" height="50%" /> */
rect {
  width, height: 50%;
}

/* <circle cx="4" cy="5" /> */
circle {
  cx, cy: 4 5;
}

Essa abreviação também permite usá-la com o @plot funcionar em css-doodle que retorna um par de valores de coordenadas.

circle {
  cx, cy: @plot(r: 4);
}

2. Abreviação de ID

o id O atributo é para referenciar o elemento e é frequentemente usado em gradientes, marcadores e filtros. Em vez de escrevê-lo dentro de blocos, ele também pode ser definido como um CSS comum seletor de código do elemento.

filter#my-filter {

}

/* is equivalent to */

filter {
  id: my-filter;
}

3. Defs em linha

No SVG, os objetos gráficos são armazenados no <defs> elemento e para ser usado em outro lugar, referenciando seus ids. Mas às vezes acho muito legal defini-los diretamente onde eles devem ser usados. Os IDs de referência são então gerados automaticamente.

circle {
  fill: defs linearGradient {}
}

/* is equivalent to */

defs {
  linearGradient#my-gradient {}
}
circle {
  fill: url(#my-gradient);
}

4. Multiplicação

Inspirado por Emmeto operador * é usado para gerar o mesmo elemento várias vezes.

circle*3 {

}

/* is equivalent to */

circle {}
circle {}
circle {}

Será mais eficaz quando combinado com css-doodle funções.

svg {
  viewBox: 0 0 10 10;
  stroke: #000;
  stroke-width: .1;
  path*3 {
    fill: none;
    d: @pn(M 5 10 Q 5 5 8 1,
           M 5 10 Q 4 5 2 4,
           M 5 10 Q 6 6 8 4);
  }
  circle*3 {
    fill: @pn(yellow, blueviolet, deeppink);
    cx, cy: @pn(8 1, 2 4, 8 4);
    r: .5;
  }
}

Aqui está um exemplo para desenhar uma estrutura simétrica.

svg {
  viewBox: -50 -50 100 100;
  path*6 {
    transform: rotate(@calc(@n*60));
    stroke-linecap: round;
    stroke: black;
    d: M 0 0 0 44
       @M2x3(M 0 @calc(-9*@ny)
             L @pn(±9) @calc(-10*@ny - 5.8));
  }
}

Mais exemplos

No início deste ano, eu tuitou um exemplo de código que usou essa nova sintaxe, como resposta para reescrever Shunsuke Takawo‘s programa de processamento em css-doodle. o multiplicação operador ainda não tinha sido adicionado naquele momento.

Agora a parte SVG pode ser simplificada assim: (CodePen)

svg {
  viewBox: -57 -57 114 114;
  stroke-width: .15;
  stroke: #000;
  fill: #fff;
  circle*720 {
    r: @calc(sin(π/@N*@n)*10);
    cx, cy: @Plot(
      r: 40+sin(4t)*5+sin(12t)*5
    );
  }
}

eu compartilhei outra amostra no Twitter que foi gerado usando caminhos e filtros SVG. Não anexei o código porque achei que não era tão elegante quanto sua saída. Ainda assim, seria um bom exemplo recriá-lo com css-doodle funções sob a nova sintaxe.

Primeiro, descreva a estrutura colocando cada Q coordenar em torno de um círculo.

svg {
  viewBox: 0 0 100 140;
  g {
    fill: none;
    stroke: black;
    path*20 {
      d: M 70 50
         Q @Plot(r: 60; move: 20 80)
           @Plot(r: 125; move: 80 60);
    }
  }
}

Em seguida, adicione mais caminhos e estilos de traçado aleatórios. Não exatamente como o antigo, mas você entendeu. (CodePen)

svg {
  viewBox: 0 0 100 140;
  g {
    fill: none;
    path*200 {
      stroke: @p(
        #f9f8eb, #76b39d, #05004e, #fd5f00
      );
      stroke-width: @r2;
      stroke-dasharray: @M2.@r(10, 60);
      d: M 70 50
         Q @Plot(r: 60; move: 20 80)
           @Plot(r: 125; move: 80 60);
    }
  }
}

Como usá-lo em seu próprio projeto?

A versão mais recente do css-doodle oferece o gerador como uma função que retorna o código SVG de saída.

import { svg } from 'css-doodle/generator';

let code = svg(`
  viewBox: 0 0 10 10;
  circle {
    cx, cy, r: 5
  }
`)

// output:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <circle cx="5" cy="5" r="5"></circle>
</svg>

Limitações

A conversão não está completa. Lidar com elementos SVG como <foreignobject> pode ser difícil. Não testei com código SVG longo, mas acho que também ficará inchado à medida que o desenho ficar complexo.

Eu gosto dessa nova sintaxe principalmente porque ela tem menos ruído visual em comparação com o SVG original. Para mim, o mais satisfatório é que se integra tão bem com css-doodle.




Source link

Previous articleDownload – Caliope Onair Radio v5.5.0 + KeyGen | Iptv
Next article(SÓ AQUI) ANÁLISE TÁTICA + PROVÁVEL ESCALAÇÃO + ÚLTIMAS NOTÍCIAS DO CORINTHIANS.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.