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. 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
    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. 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
    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 .