1

Eu tenho path animado por javascript e quero move-lo livremente pelo background do meu <body> de modo que esse path ultrapassar o maxwidth ele automaticamente aparece no lado oposto (como um portal) . Mas para isso eu preciso colocar um div como meu background, porque os meus paths em svg estão dentro desse div,

<div class= "meupath" <path d="MEU PATH"></div>

No css:

.body {
   background: src(.meupath)
   animation: move infinite 
}

@keyframes move {
   @-webkit-keyframes slide {
    from { background-position:(initial position) 0; }
    to { background-position: (final position) 0; }
    }
}

como ex: https://codepen.io/subz/pen/GgPrJP

só que ao invés desse background, poderia ser o meu "div" com meu path dentro.

gostaria de receber esclarecimentos se for possível.

1
  • É para um jogo ou é um efeito na página? Eu pergunto porque se for uma animação para jogo tem que ser feito em javascript. Já se for um efeito na página dá para fazer com CSS. Commented 1/10/2019 às 5:12

1 Resposta 1

2

Cara não sei se entendi bem pq o código que vc usou na pergunta está bem estranho, vc não pode usar o path, ou polygon, ou line, ou rect assim "solto" dentro de uma div, esses vetores devem estar dentro de um SVG e não de uma div.

Outro ponte é a forma como vc fez o seu background-position, (initial position) essa sintax me parece errada... E se vc quer animar um path/SVG que está na página vc não tem que animar o background, vc tem que animar o próprio elemento.

inserir a descrição da imagem aqui

Segue o código da imagem acima

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    height: 160px;
    background-color: #ddd;
}

svg {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translate(0, -50%);

    animation: anda 2s linear infinite;
}

@keyframes anda {
    to {
        left: 100%;
    }
}
<div>
    <svg xmlns="http://www.w3.org/2000/svg" viewbox="2 2 198 198">
        <polygon points="100,10 40,198 190,78 10,78 160,198" fill="black" style="fill:yellow" />
    </svg>
</div>


Opção 2

Caso vc realmente quera usar um svg/path como background de uma div vc precisa fazer alguns ajustes. Primeiro vc tem que declarar seu background-image como url("data:image/svg+xml; ... "); e colocar seu path ali, ficaria como abaixo.

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

Depois disso vc pode manipular o background-position para fazer o efeito que vc pretende, sendo que o valor inicial é 0 por padrão e o final eu coloquei 100%

inserir a descrição da imagem aqui

Segue o código da imagem acima

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    height: 160px;
    background-color: azure;
}

.bg {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

    /* display: inline-block; */
    /* width: 100%; */
    /* height: 1.5em; */
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 32px 32px;

    animation: anda 2s linear infinite;
}

@keyframes anda {
    to {
        background-position: calc(100% + 32px) center;
    }
}
<div class="bg"></div>

3
  • Essa pergunta tb deve te interessar pt.stackoverflow.com/questions/381885/…
    – hugocsl
    Commented 1/10/2019 às 11:24
  • 1
    SIm, é que o código eu escrevi bem rápido pra usar como exemplo, eu errei em dizer que o path estava direto no div, mas sim ele precisa está dentro de um svg, eu só queria move-lo, (svg) .Muito obrigado pelos esclarecimentos e o feedback. Commented 1/10/2019 às 13:06
  • @JulianoHenrique ah sim, entendi. Se vc acha que a resposta resolveu o problema depois lembre-se de marca-la como aceita nesse ícone ✔ abaixo das setinhas da resposta. Valeu a força, boa sorte ai
    – hugocsl
    Commented 1/10/2019 às 13:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .