JSFiddle - React, Tailwind, and code Playground

wrapping SVG fill change into angular ng-click

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.0.js"></script>
<div ng-controller="MyCtrl">

<img class="svg blue" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" width="150" width="auto" id="andrew">
<button class="btn btn-xs btn-default" ng-click="newcolsvg('#725436')">
click for new color
</button>


</div>

CSS

/*svg {width: 350px; height: 350px;   transition: all .7s ease 0s;}
svg path {fill: lightblue !important;   transition: all .7s ease 0s;}
svg path:hover {fill: orange !important;}
*/
.svg{transition: all .7s ease 0s;}
.svg:hover{opacity:0.4}
.red path{fill:orange !important;}
.blue path{fill:lightblue !important;}
.pink path{fill:pink !important;}

JavaScript

var app = angular.module('myApp', []);


app.controller('MyCtrl', function ($scope) {

$scope.newcolsvg = function(c){
var newcol = c;
var $img = jQuery('img.svg');
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');

};
   
});