Articles of svg

A linha SVG com traçado de gradiente não é exibida em linha reta

Eu estou tentando replicar um com SVG. Agora, fazer uma linha reta com o SVG funciona perfeitamente, mas no segundo eu acaricio com um gradiente que não será mais exibido em linha reta. O código a seguir funciona, mas tome nota, y1 e y2 devem ser separados por 1 unidade. Se eu definir y1 e […]

Interpolação Catmull-Rom em Caminhos SVG

Eu estou experimentando a criação de ferramentas de lápis de alto desempenho e boa aparência usando caminhos SVG. Eu estou registrando as coordenadas do mouse para desenhar um caminho. Para obter um caminho de alta fidelidade (preciso para os movimentos do usuário), preciso registrar um ponto para cada movimento de pixel. Manter cada ponto no […]

CSS: antes no SVG inline

Atualizar Obrigado por indicar por indicar a relação entre o conteúdo gerado e os elementos substituídos. Eu encontrei este artigo que lida com este mesmo tópico: http://red-team-design.com/css-generated-content-replaced-elements/ Curiosamente, um documento do W3C chamado “CSS3 Generated and Replaced Content Module” (de 11 anos atrás!) Define o pseudoelemento :outside , que poderia oferecer uma solução para usar […]

Como desenhar um caminho suavemente do ponto inicial ao final em D3.js

Eu tenho o seguinte código que traça um caminho de linha com base na function seno: var data = d3.range(40).map(function(i) { return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4}; }); var margin = {top: 10, right: 10, bottom: 20, left: 40}, width = 960 – margin.left – margin.right, height = […]

Por que o d3.js v3 quebra meu gráfico de força ao implementar o zoom quando o v2 não funciona?

Eu tenho um layout de força que eu criei usando d3.js Eu gostaria de ter tanto a funcionalidade normal de um layout de força arrastável quanto a capacidade de zoom. Eu basicamente copiei / colei o código de zoom deste código ( http://jsfiddle.net/nrabinowitz/QMKm3/ ). Esta é a mesma maneira de zoom que Mike Bostock usa […]

Incorporando SVG em PDF (exportando SVG para PDF usando JS)

Os pontos de partida: Eu não tenho um servidor que possa fornecer nada além de arquivos estáticos. E eu tenho um elemento SVG (dinamicamente criado) no meu que eu quero exportar para um formato vetorial, preferencialmente PDF ou SVG. Eu comecei a olhar para usar o jsPDF já existente, junto com o downloadify . Funcionou […]

Como dimensionar a imagem SVG para preencher a janela do navegador?

Isso parece que deveria ser fácil, mas eu simplesmente não estou conseguindo algo. Eu quero fazer uma página HTML contendo uma única imagem SVG que dimensiona automaticamente para caber na janela do navegador, sem qualquer rolagem e preservando sua proporção. Por exemplo, no momento, tenho uma imagem SVG de 1024×768; se a porta de visualização […]

Como fazer um elemento expandir ou contrair seu contêiner pai?

O objective é ter o elemento expandido para o tamanho de seu contêiner pai, neste caso, um , não importando quão grande ou pequeno esse contêiner possa ser. O código: svg, #container{ height: 100%; width: 100%; } A solução mais comum para este problema parece ser definir o atributo viewBox no elemento . viewBox=”0 0 […]

Coordenadas SVG com matriz de transformação

Eu quero implementar a funcionalidade como svg-edit no elemento retângulo Rodar retângulo Redimensionamento Arrastar Girar o retângulo SVG funciona bem, mas quando eu quero resize o retângulo, ele tem um problema. As coordenadas não estão funcionando corretamente; Eu uso a matriz de transformação para girar targetelement.setAttribute(transform,rotate(45,cx,cy)) mas quando o elemento foi girado, as coordenadas são […]

Como desenhar um caminho de vetor progressivamente? (Raphael.js)

Como animar um caminho de vetor como ele está sendo desenhado, progressivamente? Em outras palavras, mostre lentamente o caminho pixel por pixel. Eu estou usando o Raphaël.js , mas se sua resposta não é específica da biblioteca – como se houvesse algum padrão geral de programação para fazer esse tipo de coisa (eu sou relativamente […]