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