SVG线没有全宽

Question

有人帮我在 sn-p 中创建了网页动画，问题是线条不是全宽的，如果你注意到，5-10 秒后你会看到切割线没有全宽。任何想法可能导致这种情况，因为计算似乎没问题。我有另一个版本的脚本，它是全宽的，但是以另一种方式构建的，在某些浏览器中，它最多分配 10gb 的 ram :D 所以这是不行的，我们构建了这个版本的动画，它更轻。提前谢谢你

window.onload = function () {
  document.querySelectorAll('.circle').forEach(function (circle, i) {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', "0 0 200 200");
    svg.setAttribute('preserveAspectRatio', "xMidYMid slice");

    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.id = 'line' + i;
    line.setAttribute('x1', "100");
    line.setAttribute('x2', "100");
    line.setAttribute('y1', "-300");
    line.setAttribute('y2', "300");
    svg.append(line);

    var s = parseInt(circle.getAttribute("data-step"));
    var end = 180 / s;
    for (var j = 1; j < end; j++) {
      var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
      use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#line' + i);
      use.setAttribute('transform', 'rotate(' + s * j + ', 100, 100)');
      svg.append(use);
    }
    circle.append(svg);
  });
}

body {
    overflow: hidden;
}

.circle {
  height: 100px;
  width: 100px;
  position:absolute;
}

.circle span {
  text-align:center;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  border-radius: 50%;
  background-color:white;
  margin:0px auto;
  position:absolute;
}
.circle span:hover {
    color:white;
    transition: all .5s;
}
.food{
    color:#0073b3;
}
.food:hover{
    background-color:#0073b3;
}

.line{
    color:#FBAF17;
}
.line:hover{
    background-color:#FBAF17;
}

.music{
    color:#F15E42;
}
.music:hover{
    background-color:#F15E42;
}
.air{
    color:#ED1C24;
}
.air:hover{
    background-color:#ED1C24;
}
.story{
    color:#3EA472;
}
.story:hover{
    background-color:#3EA472;
}

.circle-food span{
  width:220px;
  height:220px;
  left:-60%;
  top:-60%;
}
.circle-story span{
  width:350px;
  height:350px;
  left:-126%;
  top:-126%;
}
.circle-line span{
  width:300px;
  height:300px;
  left:-105px;
  top:-105px;
}

.circle-air span{
	width:125px;
	height:125px;
	top: -15px;
	left: -15px;
}

.circle-music span{
	width:225px;
	height:225px;
	top: -65px;
	left: -65px;
}

svg {
    opacity: 0.8;
    position: absolute;
    z-index: -1;
    left:calc(50% - 100vw);
    top:calc(50% - 100vh);
    width: 200vw;
    height: 200vh;
    animation: animate 90s infinite linear;
    transform-origin: center;
}
.circle-food svg {
    stroke: #0073B3;
}
.circle-line svg {
    stroke: #FBAF17;
}
.circle-music svg {
    stroke: #F15E42;
}
.circle-air svg {
    stroke: #ED1C24;
}
.circle-story svg {
    stroke: #3EA472;
}

line {
    stroke-width: 0.05;
}

@keyframes animate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="circle circle-food" style="left:30%;top:25%;" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>

<div class="circle circle-music" style="right:15%;top:20%;" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>

<div class="circle circle-air" style="right:15%;bottom:15%;" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>

<div class="circle circle-story" style="right:40%;bottom:40%" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>

Answer 1

好像你的viewbox的宽度太小了，试着改变CSS中的svg参数：

svg {
    opacity: 0.8;
    position: absolute;
    z-index: -1;
    left: calc(50% - 200vw);
    top: calc(50% - 200vh);
    width: 400vw;
    height: 400vh;
    animation: animate 90s infinite linear;
    transform-origin: center;
}

在较小的视口上也可以使用。

当我开始一个像网站这样的项目时，我也开始从移动设备构建到更大的视口/设备，这样更容易扩展。移动设备上还有其他的东西我会考虑改变这个，不知道你的用例，这不是问题的一部分。