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-type or nth-child. Also you can reduce verbosity by moving stroke=”#3388ff” stroke-opacity=”1″ stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” fill=”#3388ff” fill-opacity=”0.2″ fill-rule=”evenodd” in CSS However if you still think you need to add `id-s in JavaScript, here is how I would do it (btw @DogukanCavus is perfectly valid):

How to change CSS class to an children inside a SVG?

I am making and animation the objetive is change the xlink:href inside a SVG. (this is for change a shape), and change class respect to their position inside. This is my SVG The class in every rectelement, has a different animation-delay according to position (first execute at 0s, second at 2s, third at 4s and so on). With JS I change every <use> at #load-area main.children[‘load-area’].children[0].setAttribute(“xlink:href”, getFigure(random())); And it works, the shape changes but, suppose when it gets three times the id #cross then all elements have third CSS class. I need change CSS class inside every children of <use>,

How to incorporate D3 svg elements into mithril.js?

I have been working with a framework using mithril.js and wish to add this script that draws an interactive tree into a component on my website. So far, I just placed the JS code inside the script tags into my application, and I know that normally, the DOM object generated is obtained by calling svg.node(). But I know I can’t return that from my object’s view method, and instead need to return something of the form m(…). I tried looking at sources like this one but couldn’t find a solution to my problem in them. Is there a known way

Change SVG path color using data in JavaScript function

I have a question that builds on similar ones like How to change SVG’s path color? and Changing SVG image color with javascript: I see how to change an SVG by color: But I’d like to use a vector of key value pairs where the key is the classname and the value will dictate the color to fill. Right now the SVG is all black but if I include a vector: Can I use that within a function like the one below (that does NOT work) to use the key as the classname and the value to color each body

Moving Bus Icon on Google Map Using JavaScript

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 Question is: how can I generate the same icon/code for a school bus? Thanks in advance. Answer The code that you provided is a SVG path. You can create your own SVG path that draws a bus and then use

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 The “dummy” data look like this: The time is displayed on the x axis and there is a horizontal bar for every project stretching from the start_date to the end_date. On the left side, on the y axis, I’d like to display the teams (see the labels on the left side in the jsfiddle) and create a gridline for each team, separating the groups of projects. Because each team has

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, x and y for the <rect> element have only been defined as CSS properties in the SVG 2 spec, which isn’t yet fully implemented by all browsers. You can easily use a transform property instead. But you must set the style property, not the attribute,