Définir un cercle / arc animation SVG

Personne ne sait comment définir une animation d'arc /cercle en SVG, tels que l'arc commence à 0 degrés et se termine à 360 degrés?

Je veux animer l'angle de balayage, mais en SVG un arc est défini en utilisant les points de début et fin.

OriginalL'auteur GarethOwen | 2010-07-15

  1. 6

    vous pouvez la peindre "à la main" à l'aide du chemin de lineto et de calculer la position de l'arc:

    <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/

    Grâce räph. Je suis encore nouveau pour le SVG et n'avez pas utilisé le <script> élément avant. Je ne sais pas si cela fonctionnera dans le béton problème que j'ai. Mais comme votre extrait de réponses à ma question parfaitement je le marquer comme étant correcte.
    Êtes-vous de la programmation pour le web? L'exemple de script fonctionne dans firefox, safari, chrome et opera! Comme alternative, vous pouvez également utiliser SMIL - mais qui ne fonctionne pas dans tous les navigateurs
    J'ai écrit une autre réponse à expliquer mon architecture en détail - s'il vous plaît voir ci-dessous, et merci encore pour l'aide.

    OriginalL'auteur räph

  2. 6

    Une façon est d'utiliser un cercle, et d'animer la avc-dashoffset (vous avez besoin d' 'stroke-dasharray' trop). Un exemple d'une telle animation (non pas un cercle, mais le même principe s'applique) peut être vu ici.

    L'autre option est d'utiliser un chemin d'accès de l'animation, et l'arc chemin des segments, pour animer/fondu enchaîné entre les chemins de voir ce exemple.

    merci erik - le lien vers le carto.net/papers/svg/samples site m'a montré quelques idées intéressantes et techniques d'animation svg.

    OriginalL'auteur Erik Dahlström

  3. 4

    Vous pouvez également dessiner les SVG à la main à l'aide d'un circle et la technique suivante:

    1. Donner la circle un stroke.
    2. Faire la stroke dashed avec un tiret longueur égale à la circonférence du cercle.
    3. Compenser les stroke par une longueur égale à la circonférence du cercle.
    4. Animer la course.

    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

    source: https://css-tricks.com/svg-line-animation-works/

    OriginalL'auteur Raphael Rafatpanah

  4. 3

    Ou peut-être vous pourrait découvrir un pré-cercle dessiné pour donner l'effet requis:

    <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>
    En découvrant le cercle est une bonne idée, et j'aime ton exemple pour le demi-cercle de cas.

    OriginalL'auteur

  5. -1

    Merci pour les réponses, voici un peu plus d'information concernant la raison pour laquelle je veux animer un cercle en SVG:

    Nous avons un serveur de la demande du client. J'ai l'intention de générer des images SVG pour représenter des graphiques (diagrammes, les graphiques et les diagrammes à barres) sur le serveur et envoyer le SVG pour les clients.
    Nous avons de Java et de .NET clients. Je vais écrire le code côté client pour analyser et rendre le SVG images reçues du serveur.
    J'ai l'intention de n'utiliser qu'un sous-ensemble du format SVG - pas plus que ce que nous avons besoin de représenter nos cartes, mais l'animation est une exigence.

    À Long terme, il serait agréable d'avoir un client ajax - qui va s'exécuter sur les navigateurs sans java ou .NET runtime. C'est pourquoi j'ai choisi le format SVG.

    Pour une solution à court terme maintenant, je pense que je vais ajouter mon propre élément de la SVG, la définition d'un arc à l'aide de début et de balayage angles. Ensuite, je peux facilement définir l'animation j'ai besoin d'en animant l'angle de balayage et fait ma mise en œuvre simple.

    À Long terme - si nous avons vraiment autour de imlpementing AJAX/HTML client, je vais avoir à re-mettre en œuvre et tenir à la norme SVG.

    Bien! Je suis curieux: en ce qui Concerne votre solution à court terme, lorsque vous déclarez vos propres éléments svg - comment votre client de rendre ces? Avez-vous analyser votre xml et de les peindre en natif?
    Oui, je parse le XML et peindre les éléments à l'aide de native Api Graphiques (Graphics2D en java, GDI+.NET.)
    Vous devriez modifier votre question au lieu d'y répondre. Par la route, vous pouvez utiliser halfstroked cercles à tirer de l'arc; Le codepen dans ma réponse vous présenter une animation.

    OriginalL'auteur GarethOwen