I’m using Javascript Google Map. I want to add a moving bus icon as the map marker will reload a new location every 5 seconds. Everything is running perfectly. I just want to add an icon that will look like a real bus, which will move on the road. I did search for that and found the following code: My
Tag: svg
Create a scale for bands with different width in D3.js
We have projects, which are assigned to different teams. Now I have to create project timelines. For the purposes of this question I have created a dummy in jsfiddle.net. https://jsfiddle.net/cezar77/6u1waqso/2 The “dummy” data look like this: The time is displayed on the x axis and there is a hor…
How to toggle different colors on consecutive clicks (on SVG objects)
I’m trying to let all elements in group change to specific colors on different amount of clicks. One click = red, two clicks = blue, etc. It needs to toggle all children in the group. JavaScript SVG file I want all the elements in the SVG group to change colors on the first click to red, second click to…
Set unique ID to SVG graph path
How to set unique ID to SVG graph path elements. The graph is created using leaflet.js Path elements are dynamically generated and I need to style them individually, so I thought of giving them unique ID. Please help. Answer As I’ve commented you don’t need an id for styling. You can use nth-of-ty…
Trigger click on SVG image
I’m having a play with a SVG image to see if I can create a map for my website. I grabbed the image from a 3rd party site, and now I’m just trying to implement it. Here is a fiddle of what I have: https://jsfiddle.net/hL1weg3o/1/ So basically the CSS is: HTML: ..and then I’m trying to captur…
CSS transition animation is not applied on inline svg but on it works fine?
If you click the button it changes the position on both elements but only the rect has the animation. Answer To use a CSS transition, you need a CSS property to animate. The <text> x and y attributes are not. (Mainly, because they can take a list of values that position glyphs individually.) In addition…
Do I add eventListener to every SVG element if I follow normal D3 way?
The normal way of handling onclick in d3 is If I do it this way on 1000 svg elements, does it mean I just attached 1000 different listeners. If this is the case, is there event delegation for d3 specifically? Answer @AlexW answer is (partially) correct: there is no event delegation in D3, only event binding. …
How to show the full SVG using Fabricjs?
First time user of FabricJs and I’m trying to load these SVG files using FabricJS as shown in their examples If you run the code snippet you will see that only the top part of the image is loaded instead of the entire SVG. I tried doing this with the other method where I create a new Image() and then
Rendering heavy SVG files (improving performance)
In our company we want to come up with universal solution for creating interactive presentations as mobile applications. First idea was to create a PDF file and use it in mobile phone, it didn’t work out – it was too slow. Another idea was to convert PDF into SVGs and use them as scenes (slides) a…
Content-Security-Policy (CSP): how to allow svg image in object
I am using the js plugin that adds inside itself SVG images. I have added CSP policy to my website, but I can’t configure it to allow plugin’s code. Its code looks like: I am looking for a configuration that allows SVG image that is rendered in the object. I am tried different options from there &…