Füllen Sie einen Anteil von SVG-und animieren die Füllung

Derzeit arbeite ich an einem Projekt, Vergleich von Daten mit Daten aus einem anderen Land. Ein Datenpunkt ist der Anteil der geschützten land-und ich möchte füllen Sie den Prozentsatz des Staates, die zu den Daten passt-Punkt. So zum Beispiel, wenn 25% der North Carolina geschützt ist, dann will ich 25% des Staates zu füllen. Derzeit bin ich versuchen, eine svg-und ich möchte, dass die Füllung zu passieren, auf die Seite laden.

Irgendwelche Vorschläge oder Ressourcen, wie dies zu tun wäre sehr dankbar.

Beispiel ich hatte in Illustrator:

Füllen Sie einen Anteil von SVG-und animieren die Füllung

  • Dies ist nicht eine Website, wo Sie die Leute Fragen, um code zu schreiben für Sie
  • Ich bin nicht auf der Suche nach dem code. Ich habe wurden scheuern im internet für einige Weg, um erfolgreich zu animieren, die Füllung zu einem Anteil des Staates und kann nicht. Ich brauche nur jemanden, der mich in die richtige Richtung. Kein code muss geschrieben werden.
  • Ich fast immer sehen, Farbe, Codierung von Stand-Daten nicht teilweise-füllt. Fände ich teilweise füllt Sie schwierig, schnell zu verstehen. Nur zu sagen....
  • Wenn Sie sagen, "25% des Staates zu füllen" was meinst du? Ein Balkendiagramm gleiten durch den Staat von Links nach rechts? Wollen Sie es werden 25% der Breite der bounding box? 25% der Fläche ausfüllen? Willst du einfach nur die Füllfarbe zu 25% deckend? -1 für fehlende Informationen; Bearbeiten Sie Ihre Frage mit mehr details, und ich werde entfernen Sie die downvote und auch zu beantworten helfen.
  • Machen Sie einen gültigen Punkt, und das ist etwas, was ich besprechen mit meinem partner in diesem Projekt, aber ich möchte versuchen und machen es Arbeit, wie ich denke, es ist eine einfache, graphische Weise zu veranschaulichen, zu welchem Prozentsatz der Staat land geschützt.
  • Brauche ich zum füllen der inneren Fläche, wenn der Staat. Wie die markE heißt, dies geschieht in der Regel durch das ausfüllen des ganzen Staates, und mit einigen Vergleich zu anderen Staaten, aber diese Taktik nicht erfüllt die Botschaft, die ich versuche zu vermitteln. Deshalb bin ich auf der Suche nach einem Weg, um füllen Sie einen Prozentsatz der innere Bereich von einem Zustand, fast wie wenn es eine Fortschrittsanzeige. Es wird kompliziert, wegen der sonderbaren Form der Formen, wie Sie wissen.
  • Dies ist immer in der Nähe genug ins detail. Nun, ist 33%, basierend auf dem nur von Links nach rechts Abstand der bounding box? Oder den Prozentsatz der Gesamtfläche?
  • Das ist eine gute Frage, etwas, was ich nicht bedacht hatte. Ich möchte die Gesamtfläche, wie ich glaube, das wäre genauer. Daher 33% der Fläche befüllt werden, weil 33% der NC-land geschützt ist. Vielen Dank für Ihre Geduld, Phrogz

InformationsquelleAutor hi_Matt | 2013-04-08
  1. 2

    Hier sind meine zwei Cent:

    Können Sie einen linearen Farbverlauf wie diese:

    <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="F1g"><stop stop-color="#00FF00" offset="0%" id="F1gst1"/><stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/></linearGradient>

    Nehmen Sie dann die erste stop-element:

    var firstStop = document.getElementById('F1gst1');

    Und weisen Sie dann den Prozentsatz, den Sie wollen zu füllen, mit dem Attribut offset:

    percentage = '35%'; firstStop.setAttribute('offset',percentage);

    ... Und das ist der Weg in javascript. Sie brauchen einen Farbverlauf für jeden Zustand (Sie können eine Gruppe verwenden) und vielleicht werden Sie brauchen, um zu definieren, ein Pfad-Objekt mit einer Füllung im inneren jedes Staates mit der gleichen form, so dass Sie anwenden können den linearen Verlauf auf, der Pfad fill-Attribut.

    Wenn Sie benötigen eine animation, können Sie eine setInterval-Funktion, und fügen Sie ein '1%' alle x Millisekunden, um den Effekt, und stoppen jedes Intervall, wenn der gewünschte Prozentsatz erreicht ist.

    Ich hoffe das zumindest haben Sie eine Ahnung.

    Grüße.

    InformationsquelleAutor Chatyeux
  2. 0

    Gut, hier ist eine ziemlich dumme Art und Weise, in Leinwand...(und ich nehme an, Sie meinen, Sie wollen eine bestimmte % der inneren Fläche gefüllt).

    Schritt 1: schreibt ein solides Bild von jedem Staat in Canvas

    Schritt 2: Zählen der Anzahl der von null verschiedenen Pixel

    Schritt 3: Extrahieren Sie die Kanten mit einer Kante Extraktion convolution

    Schritt 4: Für jede Zeile iterieren horizontal innerhalb jeder Zeile in der Form, in der Färbung Pixel, bis Sie erreicht haben, x% der Form, die Sie porträtieren möchten.

    Ist es möglich, dies zu tun in SVG, aber Sie brauchen würde, um hand-tesselate die Form, verfolgen Sie alle Ihre Bereiche und dann von hand berechnen, die zu füllen und es würde nicht das tun was ich denke, Sie wollen - das ist ein Zustand füllen Sie sich wie es ist ein Wasser container?

    Ist eine alternative Lösung, natürlich, um 3D-print-transparente Behälter in der Form von allen 50 Staaten, füllen Sie mit Wasser gefärbt, um den gewünschten Pegel. Sie fotografieren, und dann manipulieren, dass die Bild über einen SVG-filter (feImage + feColorMatrix+feComposite) selektiv zu füllen, das ein SVG-Bild. Dies kann schneller sein als das lernen, tesselation (oder Leinwand).

    InformationsquelleAutor Michael Mullany
  3. 0

    Diese kann getan werden, indem schlicht die css und html: http://jsfiddle.net/haohcraft/rAPN5/1/

    Im Grunde der trick ist

    1. Müssen Sie ein Bild, das einen transparenten inneren Bereich aber
      nicht-transparenten äußeren Bereich, wie das Bild in der Geige. Und Sie
      müssen z-index:1 um Sie über die filled
      <div>      .
    2. Legen Sie die filled <div> und die img zu position: absolute; width:90px; height:90px; in diesem Fall.
    3. Dann können Sie die height des filled div zu zeigen, die Prozentsatz
    InformationsquelleAutor Hao
  4. 0

    ProgressBar sieht vielversprechend aus und einfach zu bedienen:
    https://kimmobrunfeldt.github.io/progressbar.js/

    Hier einen schönen Fiddle-Beispiel:
    https://jsfiddle.net/kimmobrunfeldt/72tkyn40/

    Javascript:

    //[email protected] version is used
//Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  //This has to be the same size as the maximum width to
  //prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  //Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  //Number from 0.0 to 1.0
    InformationsquelleAutor Jan
Schreibe einen Kommentar