Wie ihr SVG mit AngularJS nutzen könnt

angularjs | Sascha Brink • 21.02.2014 | 1 Minute

SVG ist eine Spezifikation, mit der ihr Vektorgrafiken erstellen und in HTML einbetten könnt.

Dieses Beispiel inspiriert euch hoffentlich, ein wenig kreativ mit AngularJS zu werden. Mit nur wenigen Zeilen könnt ihr eine Analog-Uhr mit SVG und AngularJS erstellen.

In der HTML-Datei erstellen wir 3 Zeiger für Stunden, Minuten und Sekunden. Per JavaScript und AngularJS berechnen wir jede Sekunde die korrekte Rotation der Zeiger.

HTML (index.html):

<html ng-app="cookbookApp">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
  <script src="application.js"></script>
</head>
<body ng-controller="MainController">
  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <g>
      <circle style="stroke: #ccc; fill: #fff;" cx="100" cy="100" r="100"/>
      <line x1="100" y1="100" x2="100" y2="50"
            style="stroke-width: 5px; stroke: #333;"
            ng-attr-transform="rotate({{hourRotation}} 100 100)" />
      <line x1="100" y1="100" x2="100" y2="20"
            style="stroke-width: 3px; stroke: #888;"
            ng-attr-transform="rotate({{minuteRotation}} 100 100)" />
      <line x1="100" y1="100" x2="100" y2="5"
            style="stroke-width: 2px; stroke: #bb0000;"
            ng-attr-transform="rotate({{secondRotation}} 100 100)" />
    </g>
  </svg>
</body>
</html>

JavaScript (application.js):

angular.module('cookbookApp', [])
  .controller('MainController', function($scope, $interval) {

    function calculateRotation() {
      var now = new Date();
      $scope.hourRotation   = 360 * now.getHours()   / 12;
      $scope.minuteRotation = 360 * now.getMinutes() / 60;
      $scope.secondRotation = 360 * now.getSeconds() / 60;
    }
    $interval(calculateRotation, 1000);
    calculateRotation();
  });

🐛 Diesen Artikel auf GitHub verbessern

Inhaltsverzeichnis

Email Newsletter

Um alle Neuigkeiten zu erfahren, abonniere hier unseren Newsletter!

Newsletter abonnieren

Sascha Brink

Sascha betreut regelmäßig Angular-Projekte und unterstützt Firmen bei der Ausbildung ihrer Mitarbeiter. Im Jahr 2013 hat er die Platform AngularJS.DE gestartet um das Framework in Deutschland bekannter zu machen. Sascha gibt Angular- und JavaScript-Schulungen auf deutsch und englisch.

Github