SVG линия не идет на полную ширину - PullRequest
Новая
       11

SVG линия не идет на полную ширину

0 голосов
/ 04 июня 2018

Кто-то помог мне создать анимацию веб-страницы во фрагменте, проблема в том, что линии не на всю ширину, если вы заметили, что через 5-10 секунд вы увидите, что линии разреза не идут на полную ширину.Любая идея, что может вызвать это, так как расчеты кажутся нормальными.У меня есть другая версия скрипта, которая работает на полную ширину, но построена по-другому, в некоторых браузерах она выделяет до 10 Гб оперативной памяти: 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>

1 Ответ

0 голосов
/ 04 июня 2018

кажется, что ширина вашего окна просмотра слишком мала, попробуйте изменить параметры svg в CSS: 

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;
}

Также в меньшем окне просмотра это работает.

Когда я запускаю такой проект, как веб-сайт, я также начинаю наращивать свои возможности с мобильных устройств до более крупных видовых экранов / устройств, их легче масштабировать.Есть и другие вещи на мобильном телефоне, которые я хотел бы изменить с этим, я не знаю ваш вариант использования, и это не было частью вопроса.

...