31
votos
Como poderia fazer um pacman mexendo a boca com CSS puro?
Seguem exemplos apenas com CSS.
Opção 1: Feita com border-radius
Nessa opção não precisa usar position relative ou absolute, nem precisa de colocar as divs dentro de um container São apenas duas ...
- 66,5mil
30
votos
Como converter animação em Canvas/JS para SVG?
Atualização: Animação com Javascript
Para uma abordagem mais simples, consulte Animação (abaixo)
A animação de objetos em um documento SVG com Javascript pode ser feitas de
várias formas, como:
...
- 5.421
21
votos
Aceito
Como poderia fazer um pacman mexendo a boca com CSS puro?
Em HTML você pode pensar em criar 3 elementos:
2 elementos serão a base e usarei ::before e ::after (mas pode usar divs também o elemento principal será para agrupar)
O terceiro elemento será o ...
- 100mil
17
votos
Aceito
O que é um SVG?
O que é svg ?
SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como gráficos vetoriais escaláveis. Trata-se de uma linguagem XML para descrever de forma vetorial ...
- 16,1mil
13
votos
Aceito
Dividir círculo SVG em 12 partes
Consegui. Eis o fiddle: https://jsfiddle.net/m5ojvsbe/
E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão azul ► Executar que está lá em baixo:
// Raio do círculo.
var r = 50;
...
- 64,5mil
8
votos
Aceito
Círculo com borda curvada
Usando os filters do SVG acredito que vc consegue um resultado bem próximo ao da imagem. Eu não vou entrar em detalhes pois o assunto é extenso. Mas deixei comentado no código onde vc controla a ...
- 66,5mil
7
votos
Aceito
Qual o impacto que gera no navegador quando há interação infinita e direta no HTML?
Olha usei a DevTools do Chrome para verificar o consumo de recurso. Mas tenha em mente que eu testei direto na página do plugin, ali ele está praticamente rodando de forma insolada, mas pense em um ...
- 66,5mil
6
votos
Comparar atributo id com class e dar .show em outra div
Podes fazer assim:
i$("#mapa path").click(function(){
alert('Voce clicou no estado do '+$(this).attr('data-name'));
i$('[data-name="' + this.id + '"]').show();
});
Dessa ...
- 135mil
6
votos
Economizar espaço, SVG, Base64 ou imagens normais?
Imagens SVG são imagens vetoriais enquanto que imagens png, jpg e etc. são imagens matriciais.
Uma imagem SVG nada mais é que um arquivo de texto com um XML descrevendo arcos, posições, gradientes, ...
- 1.438
6
votos
Aceito
Animação de cobra em texto com SVG
Podes fazer isso com JS nativo assim:
var textPath = document.getElementById('texto'),
comprimento = textPath.getAttribute('startOffset');
var animador = setInterval(function () {
...
- 135mil
6
votos
Como deixar imagem .svg responsiva inserida diretamente no html
SVG embedado usando <img>:
<img src="my_SVG_file.svg" alt="Image description." />
css:
img {
max-width: 100%;
}
fiddle: http://jsfiddle.net/jnLc174j/
SVG como background de uma <...
- 481
6
votos
Como fazer efeito "hover" em ícone SVG?
Pelo que sua pergunta diz, imagino que queria algo como isso:
.agenda {
fill: #333;
}
.agenda:hover {
opacity: 0.5;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/...
- 10,1mil
6
votos
Aceito
Como adicionar uma fonte externa num SVG?
O SVG tem suporte para CSS, claro que com algumas propriedades diferentes para os elementos, no caso pode usar @font-face e vai conseguir o desejado, por exemplo:
<style>
@import url('https://...
- 100mil
5
votos
Aceito
Obter largura em pixeis
O segredo é o getBoundingClientRect(). Ele retorna a informação desejada há algum tempo. Funciona em todos os navegadores que não são muito antigos.
document.body.innerHTML += document....
- 471mil
5
votos
Obter largura em pixeis
Podes usar o .getBoundingClientRect() que retorna um objecto com as dimensões do elemento.
Neste teu exemplo seria:
{
height: 50,
width: 813,
left: 8,
bottom: 58,
right: 821,
...
- 135mil
5
votos
Aceito
Comparar atributo id com class e dar .show em outra div
Como o Sergio já mencionou em seu resposta você não pode ter ids repetidos, então você deve alterar uma das duas abordagem para class ou data- (data attributes).
Criei um solução empregando id no svg ...
- 9.949
5
votos
Aceito
É uma boa ideia inserir arquivos SVG inline?
Casos aonde fortemente NÃO tem boa performance fazer isso
O site já usa um sprite, aonde muitas imagens pequenas são carregadas de uma vez
O logo é uma fonte de texto (semelhante ao que ocorre com ...
- 3.784
5
votos
Como converter animação em Canvas/JS para SVG?
Usando apenas SVG talvez algo assim seja uma boa abordagem.
https://jsfiddle.net/wgzk3qze/
É claro que a animação que eu fiz não esta perfeita, foi só para exemplificar.
Eu criei 8 casos na animação ...
- 583
5
votos
Porque meu .svg não funciona no Firefox?
Seu problema é por causa do " # " na cor do fill!
[Deprecation] Using unescaped '#' characters in a data URI body is
deprecated and will be removed in M68, around July 2018. Please use
'%23' ...
- 66,5mil
5
votos
Aceito
Como fazer com CSS um fundo quadriculado tipo tabuleiro de Xadrez para o Body?
Depois de testar a solução dos colegas vi que existia um problema, que acredito ser renderização, no FireFox, Edge e IE. Como visto na imagem
A minha solução foi usar um SVG inline, no lugar do ...
- 66,5mil
5
votos
Como fazer animação com SVG ou CSS de um Texto andando pelo caminho?
Encontrei uma solução e vou tentar explica-la em partes para facilitar.
Meu primeiro erro é com a estrutura do SVG, para esse tipo de animação eu não preciso colocar o <path> dentro do <defs&...
- 66,5mil
4
votos
Aceito
Identificar elementos SVG
Você só vai conseguir por getElementById depois que o você inserir o svg no documento.
Segue exemplo:
http://jsfiddle.net/e99nyam7/
<svg width="200" height="500"></svg>
<script>
...
- 1.118
4
votos
Aceito
Mover objetos SVG gráfico
Com alguns ajustes de posicionamento no gráfico, fiz uma implementação simples usando JavaScript puro, permitindo arrastar e soltar os vértices e fazendo a linha acompanhar esse movimento.
Veja a ...
- 73,9mil
4
votos
Aceito
Mover Imagem browser
Adicione e.preventDefault() em todos os eventos de mouse, assim o comportamento padrão do navegador será suprimido com certeza.
Existe um bug no Firefox acerca disto.
Assim funciona (jsfiddle):
var ...
- 28,9mil
4
votos
Aceito
Alterar cor de objeto SVG com animação
O elemento animateColor que você usou foi descontinuado por ser redundante com o elemento animate, que funciona:
<svg width="500" height="650" >
<rect ry=5 rx=0 x=150 y=100 ...
- 65,9mil
4
votos
Aceito
Utilizar uma função várias vezes
O seu principal problema é a variável cont que é uma só, e não uma por relógio. Foi só eu introduzir uma variável myCont por relógio e usá-la ao invés da cont que funcionou.
Aqui está o jsfiddle: ...
- 64,5mil
4
votos
Aceito
Como colocar uma border / stroke num <image> em um SVG?
É possivel se vc usar um pattern dentro do svg linkando a imagem no shape (rect, polygon, circle, até no path funciona).
Primeiro vc cria a definição <defs> depois o <pattern> e coloca a ...
- 66,5mil
Only top scored, non community-wiki answers of a minimum length are eligible