Search Posts

Category: svg

change Gradient SVG fill color to component property value

I have the following SVG in my app.component.html : <svg width=”100%” height=”400″ viewBox=”0 0 52.916665 52.916668″> <linearGradient id=”my-cool-gradient” x2=”1″ y2=”1″> <stop offset=”5%” stop-color=”#00008e” /> <stop offset=”95%” stop-color=”#5c9bf9″ /> </linearGradient> <g id=”layer1″ transform=”translate(0,-244.08332)”> <path style=”fill:url(#my-cool-gradient);stroke-width:0.15281798″ d=”m 26.976113,295.49933 c -1.005532,-0.56934 … -3.33015 -4.054879,-4.17686 -5.099229,-2.6614 -11.192013,-0.69552 -13.639586,4.40092 -0.813482,1.69386 -0.981873,2.55849 -0.99184,5.09274 l -0.0086,2.18921 0.49907,0.4469 c 0.662707,0.59344 1.288063,0.59351 1.881364,1.6e-4 z” id=”path826″ /> </g> </svg> In my app.component.ts I have the following public properties: export class AppComponent{ public color= ‘#4286f4’; public […]

AngularJS – Appending External SVG to DOM using JS loses animation in Firefox only

Good evening, Problem Statement: I’m injecting external SVGs from another domain into a page so that I may interact with the internals with my directive code…animated SVGs provided by design are not working in Firefox on the page, yet work in Chrome / Safari (both CSS and Javascript driven should be supported – let’s say we’ll handle only Javascript now). When I inspect the network call of said SVG, however, and click the link to […]

I’m modifying SVG code but it doesn’t change when run

There are some SVG images that are imported into an AngularJS project. If I’m modifying them in the console they are updating but if I’m doing it in code and relaunch the application the SVG looks the same, if I inspect it in the console the changes are not there, it looks like before changing. The SVG code is: <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 12 12″ style=”enable-background:new 0 0 12 12;” xml:space=”preserve”> […]

Performance issues for large(ish) server-generated SVG in AngularJS 1.x application

I have a web application, the front end uses AngularJS 1.x At certain points an SVG file is generated by the server, dynamically based on user selection. This then needs to be displayed within the Angular-based web page. The SVG can be large-ish (~3.0 MB) but nothing ridiculous. The generation of the SVG is pretty fast and a URL is returned to the browser, downloading it is also pretty fast. I’ve noticed that if I […]

How to make .svg icon to react to disabled state and change it’s color?

Basically when state of the icon is active we should show .svg icon #1 and when it’s disabled we should show .svg icon #2 (basically show one of these two at any given time depending on a state of a button-icon). The problem is that it’s a custom .svg so I have to use Angular 1.x and md-svg-icon=”path…icon.svg” and ideally I’d like to add only 1 icon to a static import and then change fill: […]

How to make md-svg-src work on localhost?

I use Angular 1.4 and I want to include a custom .svg icon to my project, cloned a random repo on github (that uses md-svg-src tag I need) and when I open index.html the icons don’t show up (I had a similar problem at the Uni when the icons are invisible locally, but show up when I deploy the app). How to make them appear locally as well? I assume the problem is connected specifically […]

How to add a tooltip to the dynamically created SVG element in angualrjs?

We need the tooltip on the dynamically created circle. A svg circle is custom created in page and on hovering upon that tooltip should work. Here is the snippet: <td ng-if=”fldc.selected && fldc.itemStatus != undefined”> <span ng-if=”fldc.itemStatus”> <svg class=”checkmark” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 52 52″ style=”margin: 1px;”> <circle class=”checkmark__circle” cx=”26″ cy=”26″ r=”25″ fill=”none”/> <path class=”checkmark__check” fill=”none” d=”M14.1 27.2l7.1 7.2 16.7-16.8″/> </svg> </span> <span ng-if=”!fldc.itemStatus”> <svg class=”checkmark1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 52 52″ style=”margin: 1px;”> <circle class=”checkmark__circle1″ cx=”26″ […]

Angular ng-bind-html with SVG not rendering in Internet Explorer

I have an AngularJS directive that needs to render SVG via ng-bind-html. The ng-bind-html contents are included as expected in Chrome, MS Edge and Firefox, but they’re not included in Internet Explorer 11. I can see the SVG if I add the html directly. Is this a limitation of IE? If so, is there a workaround? var app = angular.module(‘app’, [‘ngSanitize’]); app.controller(‘ctrl’, function($scope) { $scope.mytxtsvg = ‘<g id=”3″ fill=”#FF9800″ fill-rule=”nonzero”><path d=”M9.99,0 C4.47,0 0,4.48 0,10 C0,15.52 […]

Not able to get exact xy-coordinates of mouse pointer in svg(on path tag)

I am developing one cordova based web application. I have some svg templates. I want to draw path between user points when user clicks on screen. I am not able get exact xy-coordinates when user clicks on path tag inside svg. But, when user clicks on main svg space its working fine. Please give any idea or solution for this. plz check code below- this is one svg template code– <div style=”height:82vh”> <p style=”text-align:center;margin:0px;padding-top:10px”> Ground […]

angularjs with svg image template

I use AngularJs v1.6.10 My html view contains code: <script type=”text/ng-template” id=”animation_item_renderer.html”> <g opacity=”1″> <g ng-repeat=”ctrl in control.controls”> <g> <g> <image id=”{{ctrl.id}}” xlink:href=”{{ctrl.imageSource}}” animation-size-item item-width=”ctrl.width” item-height=”ctrl.height” ng-if=”ctrl.getType()===2″> </image> <rect id=”{{ctrl.id}}” fill=”{{ctrl.color}}” width=”150″ height=”20″ ng-if=”ctrl.getType()===1″> </rect> </g> </g> </g> <g ng-repeat=”control in control.children” opacity=”1″ ng-include=”‘animation_item_renderer.html'”> </g> </g> <svg xmlns=’http://www.w3.org/2000/svg’ preserveAspectRatio=”xMinYMin meet” viewBox=”0,0,1000,700″ style=”background-color: ivory;font-size: 32px”> <g ng-repeat=”control in vm.controls” ng-include=”‘animation_item_renderer.html'”> </g> When ctrl.getType()===2 in browser displays next code: <g> <!– ngIf: ctrl.getType()===2 –> <!– end ngIf: […]

Next Page »