All Questions
193
questions
0
votes
1
answer
246
views
How do I position an SVG?
I have an SVG in a navbar that's supposed to go to the right when hovered. The HTML and CSS is below:
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: ...
- 383
0
votes
1
answer
185
views
Trying to create a styled tooltip for an inline SVG
New to Js I am building an interactive pronunciation guide through an inline svg.
You can view it here: https://codepen.io/r-pg/pen/OJgoXWQ
I am currently trying to add basic styled tooltips which ...
0
votes
1
answer
1k
views
Change SVG fill color on hover isn't working
I am trying to change the color of an SVG image when hovering but it seems that I cannot make it work.
Here's the code:
.signup-icon {
fill: #515151;
}
.signup-icon:hover {
fill: #FFFFFF;
}
&...
0
votes
2
answers
731
views
How to create a hover effect from an svg inside a svg border
I currently created a border in illustrator and I imported a diagram that is also a SVG to place inside of the SVG border using illustrator. So, I want to actually create hover effects from the ...
- 79
1
vote
1
answer
82
views
Hover transform not removed when mouse leaves svg element, Safari only
I have a minimal piece of code that should result in a rectangle being transformed when hovering over it. It works fine on Chrome and Edge but Safari leaves the rectangle in its transformed state when ...
- 31
0
votes
1
answer
88
views
Highlight values and save
I am using plotly to zoom my plots, save to svg and show most interesting intervals to customers. The thing I can't reach - I need to save picture with hover showing values.
For example, I zoomed, I ...
- 281
0
votes
1
answer
180
views
styling a hover statement in SVG
I'm planning a web 'menu' based on this SVG illustation:
the principle of my idea; a circle styled as being active, a circle styled as hover and an accompanying stroke that also needs to be styled
As ...
0
votes
0
answers
20
views
Is there an easier way to hover transform: scale(); on svg rect? [duplicate]
I am currently playing around in a rather complicated SVG file. Im looking to make a fully interactive thermometer. Im trying to do a hover effect on multiple recs inside my svg file.
For every ...
0
votes
1
answer
101
views
Is it possible to deactivate addeventlistener (mouseover/mouseout) on a specific condition in Javascript?
let currentColor = 0
function makeHover () {
console.log(currentColor);
svgAll.forEach(item => {
item.addEventListener('mouseover', event => {
...
- 27
0
votes
1
answer
212
views
having issues getting a circle to change colors using hover in d3
I have added some circles on a map and would like the circle to change from black to orange when hovering over it. I've tried two different approaches:
css:
circle: hover {
fill: orange
}
with a ...
3
votes
2
answers
5k
views
How to overlay text on an SVG path element in React without using the coordinates of the path element?
I am attempting to create a global COVID-19 tracker for each country using React. In order to carve out individual countries and present them I have used an SVG element as shown:
<svg
xmlns=&...
- 1,172
1
vote
0
answers
207
views
SVG custom tooltip on hover following mouse movement
I'm tinkering here on JSFiddle. The issue faced is that onmouseleave the 3rd rect has the inscription left if any of the other rect are hovered. Can someone fix this? So that onmouseleave the tooltip ...
0
votes
1
answer
582
views
SVG element hovering to cause other SVG elements change
JSFiddle example. The idea is, hovering over the big rectangle scales it in addition causing the other two smaller rectangles to scale too. Not vica versa.
HTML
<svg xmlns="http://www.w3.org/...
1
vote
2
answers
303
views
SVG on hover not taking Transition
I am trying to animate a SVG where I need to change path of the svg. While I am hovering svg at that time path changes but the Transition on hover not working. I need to make a smooth transition on ...
- 228
0
votes
1
answer
58
views
Hover change color on SVG
In the code below, I'd like to have both eyes and eye brows change color on hover. I can get it to work if you hover on the left eye, but not the right eye. The right eye brow also has a weird fill on ...
- 341