In the front end, I am using a constant as a select box that contains an SVG element. The objective is to insert the SVG into the DOM and have it functional.
(function () {
'use strict';
angular.module('app.constants', [])
.constant('ServiceSettings',
'markersType': [
{text: 'original', value: 'original', src: '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 151.3 242" style="enable-background:new 0 0 151.3 242;" xml:space="preserve"><style type="text/css">.st1{fill:url(#SVGID_1_);}.st2{fill:url(#SVGID_2_);}</style><g><g><path class="st0 marker-fill" fill="input.markerView.color" ng-style="{\'fill\': input.markerView.color}" d="M75.7,0v29.3c25.6,0,46.3,20.7,46.3,46.3S101.3,122,75.7,122v120c0,0,75.7-124.5,75.7-166.3S117.5,0,75.7,0z"/></g><g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="37.8335" y1="160.2691" x2="37.8335" y2="116.9304" gradientTransform="matrix(1 0 0 -1 0 240.266)"><stop offset="0" style="stop-color:#5AC9E5"/><stop offset="1" style="stop-color:#4FBCD6"/></linearGradient><path class="st1" fill="url(#SVGID_1_)" d="M75.7,242V122c-25.6,0-46.3-20.7-46.3-46.3H0C0,117.5,75.7,242,75.7,242z"/><path class="st0 marker-fill" d="M75.7,29.3V0C33.9,0,0,33.9,0,75.7h29.3C29.3,50.1,50.1,29.3,75.7,29.3z"/></g><g><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="75.667" y1="209.5996" x2="75.667" y2="119.0651" gradientTransform="matrix(1 0 0 -1 0 240.266)"><stop offset="0" style="stop-color:#347C8D"/><stop offset="1" style="stop-color:#4FBCD6"/></linearGradient><path class="st2" fill="url(#SVGID_1_)" d="M75.7,29.3c-25.6,0-46.3,20.7-46.3,46.3S50.1,122,75.7,122S122,101.3,122,75.7S101.3,29.3,75.7,29.3z M75.7,107.7c-17.7,0-32-14.3-32-32s14.3-32,32-32c17.7,0,32,14.3,32,32S93.3,107.7,75.7,107.7z"/><circle class="st3" fill="#ffffff" cx="75.7" cy="75.7" r="32"/></g></g></svg>'}
],
The only issue I am encountering is with the color.
<path class="st0 marker-fill" fill="input.markerView.color" ng-style="{\'fill\': input.markerView.color}" d="M75.7,0v29.3c25.6,0,46.3,20.7,46.3,46.3S101.3,122,75.7,122v120c0,0,75.7-124.5,75.7-166.3S117.5,0,75.7,0z"/>I have attempted to set the fill in two different ways, but neither of them seem to work.
$scope.styleMarker = function() {
$scope.input.markerView = {};
$scope.input.markerView.color = ServiceSettings.markersHex[$scope.input.iconColor.value][$scope.input.iconShade.value];
generalService.buildElement($scope.input.markerView.src, $scope.input.markerView.color);
$scope.input.markerView.src = $sce.trustAsHtml($scope.input.iconType.src);
console.log($scope.input.markerView);
};
The only way I can make the `fill` color work is by manually adding the entire SVG script to the view, but I prefer to keep it as a constant to avoid duplicating the SVG script.