I am using a js library (mermaid) to generate svg on a web page. I need to dynamically apply styling to parts of the svg as the user activates various commands using keyboard shortcuts, Particularly, I need to highlight the element in the svg that is currently designated as the selected one in the logical model. Looking at other questions
Tag: svg
Svg path not closing correctly
I’m trying to create a bridge-like shape with an svg using javascript. With the following html I get the overall shape, but the close path is wrong: This produces the following shape: It is closing in a strange way which means that it isn’t filling correctly. The strange vertical line from the top of the arch to the top left
How do I match up text labels in a legend created in d3
I am building a data visualization project utilizing the d3 library. I have created a legend and am trying to match up text labels with that legend. To elaborate further, I have 10 rect objects created and colored per each line of my graph. I want text to appear adjacent to each rect object corresponding with the line’s color. My
SVG cannot be displayed as an image
I’ve got svg string file on database. I want to show it on my Asp.Net Core projects view. I’m calling my data as Model from controller. When I’m trying to do it, it displays as text on my page. Here is my svg: And here is my code on Index.cshtml file: How can fix this? UPDATE: Answer I’ve solved problem.
Polygon mask SVG image not working for tsparticles in React
I have a React project which I would like to embed my logo as a polygon mask using tsparticles. It works normally if I use the sample code from the official documentation page, however if I try to use the polygon mask option, it seems that it could not detect the SVG format. I don’t know whether this is a
Ball bounces along a parabolic trajectory
The question was initiated by a topic In that question, the bounces were vertical This question concerns bounces with different amounts of offset in height and length But it is difficult to realize the unevenness of movement and speed. How to implement realistic parabolic ball movement? Any idea and solution would be appreciated. Answer I allowed for this behaviour in
SVG progress circle image rotation orientation
I am trying to create a circular progress bar (as seen in the image below). The progression is based on percentages and will move round the circle to that percentage. I have the progression moving round but the icon which moves with it needs to have the correct orientation. as the image bellow the images bottom is facing the centre
Getting the href value of an anchor within an SVG using jQuery
I am using jQuery to target anchor elements within an SVG image I have created to get the value of the href assigned to the anchor element. I am then trying to toggle on and off a piece of content that has an HTML ID identical to the href of the anchor element. I am facing a problem when I
Fill Percentage area in a custom Oval SVG image
I would like to fill a custom SVG to a specific percentage. Here is my initial SVG Suppose there is a progress of x% so I would like to fill this SVG like I am not able to figure out how to achieve this. I want it to be dynamic so that I can make it for any percentage. Also,
Smoothly move an SVG line along a rectangular path
I am trying to recreate the following animation: I am having trouble with getting a line to properly animate around corners. I’ve tried using an animateMotion-element like so: But the line is not smoothly rounding corners. Any idea on how to get it to make it move smoothly around corners as shown in the GIF? Answer You will need to