How To Write A Directive For Angularjs That Replaces Dom Elements Without Using Ng-transclude?

I wish to write a directive that basically transforms this: Hello There to

Solution 1:

var app = angular.module('app', []);
app.directive('gText', function() {
    return {
        restrict: 'E',
        compile: function(tElement, attrs) {
            tElement.replaceWith('<svg class="gx-text"><text>'
                + tElement.text() + '</text></svg>');
        }
    }
});

​Fiddle