Créer SVG cercle de progression

Quelqu'un sait comment créer un cercle "progressbar" en svg? J'ai besoin de spécifier le pourcentage du cercle, så qu'une couleur se développe sous la forme d'un gâteau.

La croissance peut être statique tant que j'ai un attribut à modifier son statut actuel.

OriginalL'auteur doh | 2011-03-08

  1. 8

    Merci, boldewyn.

    Pour répondre à ma propre question, j'ai trouvé la solution suivante:

    On peut utiliser le chemin d'accès suivant dans le modèle:

    <path id="progress" fill="none" stroke="#ffffff" d="" stroke-width="10"/>

    Et utilisez cette fonction à partir de Raphael js-cadre pour la mise à jour de x et y. Si le total est de 100, la valeur est le pourcentage d'avancement:

    function updateState (value, total, R) {
    var center;
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = 300 + R * Math.cos(a),
        y = 300 - R * Math.sin(a),
        path;
    if (total == value) {
        path = "M"+ 300 +","+ (300 - R) +" A"+ R+","+ R+","+ 0+","+ 1+","+ 1+","+ 299.99+","+ 300 - R;
    } else {
        if(alpha > 180) {
            center = 1;
        } else {
            center = 0;
        }
        path = "M"+ 300+","+ (300 - R) +" A"+ R+","+ R+","+ 0+"," + center +","+ 1+","+ x+","+ y;
    }
    return path;
}

    Retourné avec la variable de chemin d'accès, la valeur de la d attribut de l'élément de chemin.

    Cela fonctionne parfaitement, si votre navigateur prend en charge le format SVG Complet avec l'Arc Elliptique de commande pour le chemin d'accès de l'élément. Dans mon cas, je n'ai que SVG tiny, donc cela ne marchera pas pour moi 🙁

    OriginalL'auteur doh

  2. 4

    Sans vergogne copier et coller à partir de la spécification:

    <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
    fill="yellow" stroke="blue" stroke-width="5" />

    Le chemin d'accès utilise le "arc elliptique de la commande" à tirage partiel d'un cercle. Vous pouvez soit dessiner plusieurs d'entre elles, chacune décrivant une autre section circulaire, ou vous donner l'un d'eux d'un IDENTIFIANT et d'référence avec <use xlink:href="#ID" />. Ensuite, vous pouvez faire pivoter l' <use/>. Tirer autant de comme vous en avez besoin pour granularité (par exemple, de 100 secteurs d'autoriser des étapes de 0% à 100%).

    Pour les colorer, il suffit de régler le fill="" attribut de chaque secteur à l'ajustage de la valeur.

    OriginalL'auteur Boldewyn

  3. 4

    Utiliser cette méthode implémentée dans le code JavaScript
    par exemple ici pourcentage=85

    Code HTML:

    <p style="position:absolute;margin-left:95px;margin-top:50px;" id="percentage">0 %</p>  
<svg style="position:absolute" id="svg_test" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="110" cy="60" r="50" fill="none" stroke="#e4e4e4" stroke-width="2"></circle>
<path id="svgpath" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="none" stroke="#16a6b6" d="M60,60 A50,50 0 0,1 160,60" stroke-width="2"></path>
</svg>

<circle style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="110" cy="60" r="50" fill="none" stroke="#e4e4e4" stroke-width="2"></circle>
<path id="svgpath" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="none" stroke="#16a6b6" d="M60,60 A50,50 0 0,1 160,60" stroke-width="2"></path>
</svg>

    jQuery Code:

        percentage=85
if(percentage>=50)
{
flag=1;
}
var per=0;
$(svg).animate({ 'to': 1 }, {
duration: 2000,
step: function(pos, fx) {
//var offset = (pos);
if(pos<0.5)
{
if(percentage>=50)
{
per=180;
$('#percentage').html(Math.round(pos*100)+" %");
}
else
{
per=(percentage*180/50);
$('#percentage').html(Math.round(percentage*pos*2)+" %");
}
endx=110-50*Math.cos(0+(Math.PI/180)*per*(pos*2));
endy=60-50*Math.sin(0+(Math.PI/180)*per*(pos*2));
svg.setAttribute('d',current_dx+endx+","+endy);
}   
else if(pos>=0.5 && pos!=1 && flag==1)
{
per=((percentage-50)*180/50);
$('#percentage').html(Math.round(50+(percentage-50)*(pos-0.5)*2)+" %");
endx=110+50*Math.cos(0+(Math.PI/180)*per*(pos-0.5)*2);
endy=60+50*Math.sin(0+(Math.PI/180)*per*(pos-0.5)*2);
svg.setAttribute('d',current_d+endx+","+endy);
}
}
});

    Démo : Cliquez Ici

    J'ai créé un jsfiddle je veux commencer à partir de 90 ° au lieu de 180 deg. Quels sont les changements que je dois faire dans le code ci-dessus

    OriginalL'auteur Hardik Sondagar

  4. 2

    Il y a quelques temps, j'ai été en avoir besoin alors j'ai étudié beaucoup de choses à faire.
    Tous vous avez besoin est d'une simple SVG balisage avec les coordonnées de droite, un peu de CSS et un peu de JS (pour permettre le changement de l' % de la barre de progression).
    Mais en même temps, vous pouvez générer du SVG sur le back-end avec le bouton droit de coordonnées basé sur le % que vous voulez et à moins que votre progrès ne peut pas être en lecture seule, qui serait à l'œuvre.

    C'est la mise en œuvre: http://codepen.io/leandroico/pen/zwIHl

    Et c'est l'exemple de la SVG balisage:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<g class="arcs">
<circle cx="50" cy="50" r="49" class="outer-circle" />
<path d="M50 1 A 49 49, 0, 1, 1, 7.06 73.61, L 50 50 z" class="outer-arc" id="arc1" />
<circle cx="50" cy="50" r="35" class="inner-circle"  />
<path d="M50 15 A 35 35, 0, 1, 1, 19.33 66.86" class="inner-arc" id="arc2" />
</g>
<g class="circles">
<circle cx="50" cy="50" r="49" class="outer-circle" />
<circle cx="50" cy="50" r="35" class="inner-circle" />
</g>
<text x="50" y="58" id="percentage-label">67%</text>
</svg>

    OriginalL'auteur leandroico

  5. 1
    <svg xmlns="http://www.w3.org/2000/svg" width="225" height="225">
<g>
<circle cx="112" cy="112" r="95"></circle>
<path id="path" d="M 112,17 A 95,95 0 0,0 112,17"></path>
</g>
</svg>
<script type="text/javascript">
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var x = centerX + radius * Math.cos(angleInRadians);
var y = centerY + radius * Math.sin(angleInRadians);
return [x, y];
}
function drawCircle(elm, centerX, centerY, radius, percentage) {
var angle = (360 * (percentage / 100)) % 360;
var start = polarToCartesian(centerX, centerY, radius, -90);
var end = polarToCartesian(centerX, centerY, radius, -(angle + 90));
var large = percentage < 50 ? 0 : 1;
var length = (2 * Math.PI * radius) * (percentage / 100);
console.log(start, end, angle);
elm.setAttribute('d', 'M ' + start[0] + ',' + start[1] + ' A ' + radius + ',' + radius + ' ' + 0 + ' ' + large + ',' + 0 + ' ' + end[0] + ',' + end[1]);
elm.setAttribute('stroke-dasharray', length);
elm.setAttribute('stroke-dashoffset', length);
}
drawCircle(document.getElementById('path'), 112, 112, 95, 47);
</script>

    OriginalL'auteur nelu.ipx