I have a set of coordinates that can be used to create a polygon in google maps. I used the mercantor-projection formula described in this answer to convert it into a set of points (x,y) that can be used in an svg . The conversion was successful and it was rendered properly. The snippet below renders well wit…
Tag: svg
React inlined SVG paths are not responding to css animations
I uploaded my code and svgs to this github repo. I have some svgs of some circles, blobs and triangles. I am trying to make the circles shake, like how the guy shakes in this code pen when you hover on him, I am trying to make the blobs move like waves like in this code pen, and I’m trying
How to display svg image after load?
I have an input file type: Method opens file: Method reads a data: So when I load a SVG image I get content of it. How to place image in block id=”block” based data? SVG image looks like: As you can see image file has svg tag. For readAsText I get this: For readAsDataURL: Answer Maybe i think it t…
Is there a way to translate a nested element with transform=”translate(mouseX,mouseY)” in JS?
Edit: Code: note: similar but not a duplicate of Creating a new SVGTransform object to append to SVGTransformList because I can’t comment xD and I want to move an SVG in an SVG to my mouse position. The problem is, the #snap-icon-x-container element appears to have no viewportElement. In Creating a new …
How to add grid lines to a Chart in Javascript
I’m new to Javascript, and through exploring various websites I have created a draggable points line chart. The data points are movable and the line connecting the dots is made invisible. The data points will move vertically only. I want to have grid lines with this chart. I tried but have not able to a…
Javascript: move a DIV and detect when it’s fully inside another DIV?
I have to create a UI where the user can click buttons to move a DIV (the gray box) in preset increments by clicking the 4 buttons. Further, i need to detect when they have moved it completely “inside” the other DIV (dotted red line). Moving the div seems straightforward enough, but I am confused …
Add text to SVG path dynamically
I have an SVG exported from Adobe Illustrator with several paths like this, which produces a small polygon I intend to use as a text box I’d like to dynamically add text to it. I’ve seen many similar questions here, but most of them involed specifying a x and y property for a text element based on…
React with Svg vertical stacked barchart (no third party library)
I have below piece of code. I am using React and svg for bar charts. I am not using any third party library for charts. With this below piece of code, i am able to get the bar charts. But the issue is that my bar charts show horizontally, I want to show it vertically. I am not able to
Insert circular text into sections in SVG using Javascript
It’s me again with my “Wheel of life” thing. But since last time i’ve got many steps further. I actually arrived at the final step, adding text in sections. Here is the code I have so far (open in full screen): So as you can see, the inputs to get the text are added below the previous …
Svg animations replaying in the same spot
I am working on a tower defense game with HTML, CSS, and JS. I want to be able to create svg circles that will follow a path using an svg animation. In order to do this, I wrote this code: The first time I run the attackerSvg function, everything works fine. A circle is created at the start of the