All Questions
19
questions
26
votes
3
answers
23k
views
SVG USE element and :hover style
I'm trying to use CSS :hover pseudoclass to style SVG elements embeded from <defs> by <use> tag, but it doesn't seem to work :-/ Here's my code:
<!DOCTYPE HTML>
<html xmlns="...
- 14.4k
87
votes
2
answers
144k
views
Using CSS to transition the fill property of an SVG path on hover
I'm including an SVG image file on my page within an object tag, like this:
<object type="image/svg+xml" data="linkto/image.svg">
<!-- fallback image in CSS -->
</object>
The ...
- 1,566
35
votes
5
answers
58k
views
How to hover over an SVG rect?
In this piece of SVG (tried in FF 8, Safari 5.1.2, Chrome 16, all on Mac), when moving mouse over the bar, none of the browsers properly detect each on-mouse-over/out event, sometimes it works ...
- 12.3k
7
votes
4
answers
11k
views
Why Doesn't This CSS Transition Work On SVG Inside an Anchor
I'm trying to transition the fill and path of an embedded SVG object, however this doesn't seem to work (Code Pen here):
The SVG:
<a class="simple-link svg-link" href="">
Some Text
<svg ...
- 43.6k
44
votes
11
answers
109k
views
Style SVG circle with CSS
So I have my SVG-circle.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="168" cy="179" r="59" fill="white" />
</svg>
I want it to be 120% when one hover the ...
- 517
5
votes
1
answer
10k
views
Reset svg fill in css
I want to have all my svgs to have the same plain color. So I use
svg *{
fill: #ccc;
}
But I want to get default fills on :hover. How can I disable the fills and get defaults back?
- 573
2
votes
2
answers
1k
views
Text on a rectangle kills the rectangle's hover effect
I have several svg rectangles with an hover effect, the background-color of the rectangles gets changed when the mouse is over them. The hover effect is set via css:
.myclass:hover {
fill: rgb(...
- 1,412
1
vote
1
answer
3k
views
SVG CSS Hover Styling
Trying to stylize a SVG of this multi-color HTML image using CSS so that the right side of the 5 is white on hover.
body {
background-color: gray;
}
svg {
height: 50vh;
fill: white;
...
- 31
1
vote
1
answer
2k
views
CSS :hover on SVG group area instead of rendered pixels, pointer-events: bounding-box not working cross browser. How to workaround
I'm working on some animated SVGs with CSS animations that triggers on hover.
I'm being able to have the SVG animate on hover the way I want to for Chrome but I'm facing a Firefox and Safari issue.
...
- 311
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 ...
6
votes
1
answer
19k
views
How to Change Stroke Color in SVG Image on Hover Event? [duplicate]
I've been searching through the site for an answer, and it seems no one has really received a definitive answer for this specific question.
I'm looking to change the color of the stroke on an SVG ...
- 135
5
votes
1
answer
7k
views
SVG - polygon hover does not work correclty [duplicate]
As you can see on gif below, :hover state does not work properly when I move the mouse cursor from bottom polygon to upper polygon:
polygon {
stroke-width: 5;
stroke: red;
fill: none;
}
...
- 53.8k
1
vote
2
answers
2k
views
Animate SVG text along a text-path only when hovering over a circle
I would like to move the animation from HTML to
css. I would like to add it as an animation only when you hover over <circle id="circle"..
<svg height=600 width=800>
<g>
...
- 103
1
vote
2
answers
7k
views
SVG css rotation sticking and not rotating about the center
When hovering an SVG, I want it to rotate the "container" with its contents not rotating. I tried countering the rotation of the SVG by counter rotating its contents but hit 2 issues:
They're not ...
- 10.7k
1
vote
1
answer
4k
views
SVG rotate image fill on hover
I have a svg mask that rotate clockwise on hover with a picture fill inside.
I would like the picture to rotate counter-clock wise to compensate the rotation of the shape on hover.
My issue is that ...
- 419