JSFiddle - React, Tailwind, and code Playground

by JasonMore

HTML

<!DOCTYPE html>
<html id='ng:app' class='ng-app: myApp' ng-app='myApp'>
<head>
  <title>Playing with Angular and SVG</title>
</head>
<body>
  <div>
    <div ng-controller="Controller">
      <form novalidate class="simple-form">
        Size: <input type="text" ng-model="size" /><br />
          Pos: <input type="text" ng-model="pos" /><br />
      </form>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height='400' width='400'>
        <square x='0' y='5' size='50' fill='blue'/>
          <rect x='{{pos}}' y='100' width='{{pos}}' height='{{size}}' fill='red'/>
      </svg>
    </div>
  </div>
</body>
</html>

JavaScript

function Controller($scope) {
  $scope.size = 100;
    $scope.pos = 30;
}
var myapp = angular.module('myApp',[]);
myapp.directive( 'square',
    function(){
        console.log('directive square set up');
        return {
            restrict:'E',
            template:'<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}"/></svg>',
            scope:{
                size:"@"
            },
            replace:true,
            link: function(scope, elem, attrs){
                // the element we want was wrapped in svg so that it would not turn out to be an HTML element. So extract it
                var e = angular.element(elem[0].firstElementChild);
                // add any properties as attributes
                for (prop in attrs){
                    if(typeof attrs[prop] === "string"){
                        e.attr(prop, attrs[prop]);
                    }
                }
                elem.replaceWith(e);
            }
        };
    }
);