html - 内联 WebSVG 没有清晰的线条？

Question

我有一个 svg 背景，它开始时是分离的，然后在页面加载 3 秒后移动以形成背景。您可以从一开始就看到一个质量相当差且非常不稳定的大三 Angular 形，这可能是什么原因造成的？

这是一个 Codepen 例如链接。

CSS

html,
body,
.avatar {
  /* position: absolute; */
  width: 100%;
  /* height: 100%; */
  display: block;
}
body {

  background: -webkit-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* W3C */

}
.avatar {
  z-index: 800;
}
.avatar path {
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all 3s ease;
          transition: all 3s ease;
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
}
.avatar path:nth-of-type(4n+1) {
  -webkit-animation: p1 3s ease 1;
          animation: p1 3s ease 1;
}
.avatar path:nth-of-type(4n+2) {
  -webkit-animation: p2 3s ease 1;
          animation: p2 3s ease 1;
}
.avatar path:nth-of-type(4n+3) {
  -webkit-animation: p3 3s ease 1;
          animation: p3 3s ease 1;
}
.avatar path:nth-of-type(4n+4) {
  -webkit-animation: p4 3s ease 1;
          animation: p4 3s ease 1;
}
.hover {
  position: absolute;
  width: 40%;
  height: 40vw;
  top: 50%;
  left: 30%;
  margin-top: -20vw;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  visibility: hidden;
  -webkit-animation: waitforit 0 ease-in 3s 1 forwards;
          animation: waitforit 0 ease-in 3s 1 forwards;
}
.hover:hover + .avatar path:nth-of-type(4n+1) {
  -webkit-transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
          transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+2) {
  -webkit-transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
          transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+3) {
  -webkit-transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
          transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+4) {
  -webkit-transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
          transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
}
p {
  position: absolute;
  bottom: 0.5em;
  font-family: sans-serif;
  font-weight: 100;
  letter-spacing: 0.1em;
  color: #fff;
  border-left: 20px solid #fff;
  padding: 2px 0 0 4px;
  left: -50%;
  -webkit-animation: infromleft 0.5s ease-in 1 forwards;
          animation: infromleft 0.5s ease-in 1 forwards;
}
@-webkit-keyframes p1 {
  0% {
    -webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
            transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p1 {
  0% {
    -webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
            transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes p2 {
  0% {
    -webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
            transform: translate(400%, -900%) rotate(850deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p2 {
  0% {
    -webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
            transform: translate(400%, -900%) rotate(850deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes p3 {
  0% {
    -webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
            transform: translate(500%, 900%) rotate(325deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p3 {
  0% {
    -webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
            transform: translate(500%, 900%) rotate(325deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes p4 {
  0% {
    -webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
            transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p4 {
  0% {
    -webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
            transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes waitforit {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@keyframes waitforit {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@-webkit-keyframes infromleft {
  0% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}
@keyframes infromleft {
  0% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}

感谢大家的帮助。

Answer 1

好吧，@Sirko 指出它使用 PNG 作为来源，所以这部分归功于他。

我之前在 AI 中更改了三 Angular 形的颜色，然后单击渐变网格工具并向我的三 Angular 形添加了额外的点，这反过来导致单个三 Angular 形被视为 .png。

感谢大家的帮助，感激不尽!