Определите анимацию круга / дуги в SVG - PullRequest
Новая
       47

Определите анимацию круга / дуги в SVG

9 голосов
/ 15 июля 2010

Кто-нибудь знает, как определить анимированную дугу / круг в SVG, чтобы дуга начиналась с 0 градусов и заканчивалась на 360 градусов?

Ответы [ 7 ]

7 голосов
/ 16 июля 2010

Вы можете нарисовать его "от руки", используя lineto пути и вычислить положение дуги: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 1200 800"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;"
   onload="drawCircle();"> 
  <script> 
    function drawCircle() {
        var i = 0;
        var circle = document.getElementById("arc");
        var angle = 0;
        var radius = 100;     
        window.timer = window.setInterval(
        function() {
            angle -=5;  
            angle %= 360;
            var radians= (angle/180) * Math.PI;
            var x = 200 + Math.cos(radians) * radius;
            var y = 200 + Math.sin(radians) * radius;
            var e = circle.getAttribute("d");
            if(i==0) {
                var d = e+ " M "+x + " " + y;
            }
            else {
                var d = e+ " L "+x + " " + y;
            }
            if (angle === -5 && i !== 0) {
                window.clearInterval(window.timer);
            }

            circle.setAttribute("d", d);
            i++;
        } 
      ,10)
    }
    </script> 

    <path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>

http://jsfiddle.net/k99jy/138/

6 голосов
/ 16 июля 2010

Один из способов - использовать круг и анимировать stroke-dashoffset (вам также нужен 'stroke-dasharray').Пример такой анимации (не с кружком, но применяется тот же принцип) можно увидеть здесь .

Другой вариант - использовать анимацию пути и arcсегменты пути , для анимации / трансформации между путями см. этот пример .

4 голосов
/ 05 января 2017

Вы также можете нарисовать SVG вручную, используя circle и следующую технику:

  1. Дайте circle a stroke.
  2. Сделайте stroke dashed с длиной тире, равной окружности круга.
  3. Смещение stroke на длину, равную окружности круга.
  4. Анимация обводки.

HTML: 

<svg width="200" height="200">
  <circle class="path" cx="100" cy="100" r="96" stroke="blue" stroke-width="4" fill="none" />
</svg>

CSS: 

circle {
  stroke-dasharray: /* circumference */;
  stroke-dashoffset: /* circumference */;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: /* length at which to stop the animation */;
  }
}

jsfiddle

источник: https://css -tricks.com / svg-line-animation-works /

3 голосов
/ 08 сентября 2013

Или, может быть, вы можете открыть предварительно нарисованный круг, чтобы получить необходимый эффект: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="400" height="400">
  <rect x="0" y="0" width="1000" height="1000"/>
  <circle cx="500" cy="500" r="500" fill="red"/>
  <rect x="0" y="500" width="1000" height="500"/>
  <rect x="0" y=  "0" width="1000" height="500">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" fill="freeze" from="0,500,500" to="180,500,500"/>
  </rect>
</svg>
2 голосов
/ 19 марта 2016 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    
</body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 1200 800"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;"
   onload="drawCircle();"> 
  <script> 
    function drawCircle() {
        // center point
        var cX = 300,
            cY = 300;
            radius = 300,

            p1 = {x: cX+radius, y: cY},
            p2 = {x: cX-radius, y: cY},

            circle = document.getElementById("arc"),
            angle = 0;

        window.timer = window.setInterval(
            function() {
            angle -= 5;  
            angle %= 360;
            var radians= (angle/180) * Math.PI;
            var x = cX + Math.cos(radians) * radius;
            var y = cY + Math.sin(radians) * radius;

            if (Math.abs(angle) < 180 && angle != 0)
                d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==180?' 0 1 0 ':' 0 0 0 ')+x+' '+y;
            else
                d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ ' 0 1 0 '+p2.x+' '+p2.y +
            ' M ' + p2.x + ',' + p2.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==0?' 0 1 0 ':' 0 0 0 ')+x+' '+y;
            
            circle.setAttribute("d", d);

            if (Math.abs(angle) == 0)
                window.clearInterval(window.timer);
        } 
      ,10)
    }
    </script> 
    <path d="" id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>
</html>
2 голосов
/ 25 ноября 2015

Я также был немного разочарован тем, что не смог просто сделать дугу окружности с процентом или углом.

В настоящее время, когда мне нужна дуга, которая не является частью более длинной траектории, яиспользуйте трюк circle и strokeDasharray, чтобы показать только часть этого круга. 

svg {
  outline: solid;
  height: 100px;
  width: 100px;
}
.arc {
  fill: transparent;
  stroke-width: 5;
  stroke: red;
  stroke-dasharray: 94.24778 219.91149;
}
<svg viewport="0 0 100 100">
  <circle cx="50" cy="50" r="50" class="arc"></circle>
</svg>

Здесь вы можете увидеть улучшенную версию , в которой для расчетов используется Sass.

0 голосов
/ 16 июля 2010

Спасибо за ответы - вот еще немного информации о том, почему я хочу анимировать круг в SVG:

У нас есть приложение сервер-клиент.Я планирую генерировать изображения SVG для представления диаграмм (круговых диаграмм / гистограмм) на сервере и отправлять SVG клиентам.У нас есть клиенты Java и .NET.Я напишу код на стороне клиента для анализа и рендеринга изображений SVG, полученных с сервера.Я планирую использовать только подмножество формата SVG - не более того, что нам нужно для представления наших диаграмм, но требуется анимация.

В долгосрочной перспективе было бы неплохо иметь клиент ajax - это будетработать в браузерах без Java или .NET времени выполнения.Вот почему я выбрал формат SVG.

Для краткосрочного решения я думаю, что теперь я добавлю свой собственный элемент в SVG, определяя дугу, используя начальный угол и угол развертки.Затем я могу легко определить нужную мне анимацию, анимировав угол развертки, и упростив мою реализацию.

В долгосрочной перспективе - если мы действительно дойдем до реализации клиента AJAX / HTML - мне придется заново реализоватьи придерживаться стандарта SVG.

...