This question already has answers here:
How to modify the fill color of an SVG image when being served as background image?
(24 answers)
Closed 2 years ago.
html:
<img src="logo.svg" alt="Logo" class="logo-img">
css:
.logo-img path:hover {fill: red;}
Is there a way to change a the hex code on a img svg on hover?
I don't think you can do that using CSS only, but you could do it with a bit of JavaScript, if you can change the HTML.
Something like:
onmouseover="this.src='newSrcHover.jpg';"
Or you can change the background-image: url('linkToNewImage')property on :hover... while that does change an image on hover and may be sufficient for some, it's not src. The JS one is.
An svg in a src attribute is loaded as a file, so it won't be editable.
If you intend to modify fill, stroke and so on, you should use your logo.svg in an <svg> tag instead of an <img />.
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I want to ask if there is a way in CSS to style an element on a link hover.
What I mean is that for example on a link hover change the body background color to blue.
I tried to search but I didn't find anything.
Yes it is possible to use "hover".
For example :
a: hover {
background-color:blue;
text-decoration: none;
}
However, I think it's best to share your code so that you can help you.
You can do so if the link elements preceeds or is the parent of the element whose background you want to change
UPDATE
If your html structure looks like this
<a class="my_link" href="example.html">My link</a>
<div class="my_element"></div>
In the above code, the a tag with class my_link proceeds the element which we want to change its background. In this type of scenario, you can use the CSS code below. Notice the ~ symbol...
Then in CSS
.my_link:hover ~ .my_element{
background: red;
}
If your html structure looks like what i have below, where the a tag is the parent of the element whose background we want to change.
<a class="my_link" href="example.html">My link
<div class="my_element"></div>
</a>
The CSS code below would do the trick. Notice the ~ symbol is omitted
.my_link:hover .my_element{
background: red;
}
This question already has answers here:
SVG data image not working as a background-image in a pseudo element
(4 answers)
Closed 2 years ago.
basically my question is the same as this one: SVG path as div dackground
I tried the solution given there, and it works in general.
My problem: I need to change the color of the line made with the SVG.
It is rendered in black and when I add the "fill"-Attribute to the path, nothing is rendered at all.
This is my rendered background image in the dev-tools
Thank you in advance.
Background img isn't a part of the DOM and you can't manipulate it. Possibility would be to use it regularly, embed it in a page in a normal way, but position it absolutely, make it full width & height of a page and then use z-index css property to put it behind all the other DOM elements on a page.
Only you need to do is to add fill and fill-opacity property in style attribute like this
<path style="fill:red;fill-opacity:1;" ...>
div.back {
width:600px;
height:120px;
background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 4442 720"><path style="fill:red;fill-opacity:1;" d="M36,297.64c317.62,0,428,134.58,696,136.74S1160,364,1436,389s431.72-102.09,618-91.36,505.93,73.37,715,72.29,339,72,674,64.45,712.27,157.83,920,174l46,111.14H36Z" ></path></svg>');
background-size:cover;
background-color:pink;
}
<div class="back"></div>
Well, it's really wired.
I have found a solution, you can write <path fill="blue" (with the name of the color similar to the result you want) and it works. But if you write #00F or "#00F" instead of "blue" it doesn't work!!! The reason is unknown, so I suggest you to use the name of a color similar to the hexadecimal rgb you want.
Anyway, for the background-color if you write for example background-color:#7d212b; rather than background-color:pink; it works!
I am playing around with SVGs (trying to replace icon fonts with SVG.) I got it to render the image/svg using object tag. However, I can't get it to change color from CSS. Assuming, I prefer coloring it from CSS, is there a way to do that while I use to embed SVG.
<object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
Your browser does not support SVG
</object>
CSS, I tried so far:
.partnerLogo {
width: 100%;
height: 100px;
color: red;
color-fill: red;
}
In sample.svg file, I added, <?xml-stylesheet type="text/css" href="../css/styles.css"?> just before
styles.css is being added to the page.
Thanks!
It isn't possible to directly modify the fill if you're using the SVG using the <object> method. The SVG is included as a document fragment inside the object tag, so your properties aren't passed as you can see in this image.
However, there are two ways you can modify the colors of an external SVG.
1) Use Javascript (recommended)
Using Javascript you can fetch the SVG contents via an XHR, and then inject it as inline SVG. As it's inline SVG technically, you can modify the fill color. There's a library I have written (svg-loader) that make it really easy to do this.
You just need to include the library and use data-src attributes to load SVGs.
Example:
Here, I have included a logo in three different formats, modifying the fill color.
<script type="text/javascript" src="https://unpkg.com/external-svg-loader#latest/svg-loader.min.js" async></script>
<div style="display:flex;">
<div style="background:black;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="yellow"></svg>
</div>
<div style="background:purple;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg>
</div>
<div style="background:green;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="red"></svg>
</div>
</div>
2) Use filter CSS property
You can use the filter CSS property to reach any color using bunch of operations (brightness, contrast, hue-rotate..). There an existing stack overflow discussion on this.
Example:
.red {
filter: invert(20%) sepia(97%) saturate(4013%) hue-rotate(353deg) brightness(93%) contrast(127%);
}
<img src="https://s2.svgbox.net/assets/logo-white.svg" class="red" />
The big drawback here is that you'd need to calculate this for every color (using this) and doesn't make it obvious how it works. Also, it won't work well with SVGs having multiple colors.
As far as I know, color in SVG-CSS should be stroke for borders and fill for backgrounds:
.partnerLogo {
width: 100%;
height: 100px;
stroke: red;
fill: red;
}
You can't use external CSS classes to style a SVG called within an < object > element, despite a lot of blog posts in the subject says you can interact with, buit this is misleading for this particular case. You must add the formattings inline, inside the actual SVG.
If you need to access and alter the actual objects and paths of an SVG from your main css file, you must embedd it inline, using the < svg > tag.
Here's a post that covers it all:
https://vecta.io/blog/best-way-to-embed-svg
I know this is an old question now - but this is for any future readers who want to colour their SVGs with pure CSS rather than have to use JS. I find this method quite convenient compared to other methods - and you can even colour your SVGs with a gradient etc.!
I simply make a div which will contain my SVG and give it a class.
HTML:
<div class="colourful-svg"></div>
Then the colour is done using masks and background colour in your CSS.
CSS:
.colourful-svg {
mask-image: url("path/to/your/svg-file.svg");
background: green;
// Make sure you define dimensions for your div otherwise it won't show up
height: 500px;
width: 500px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
This will make your SVG fill the div you had made and therefore be the size you need it to. It then uses a mask to essentially only show your background colour through the SVG you have linked to using the url() function.
Masks now have pretty good support with prefixes (about 94% globally from caniuse.com at the time of writing), so I think this is quite a simple and easy way to implement colour SVGs - I hope someone finds this useful!
I have an image not changing on hover and I can't figure out why.
<img src="images/image.png" alt="image" class="portImage2">
This is displaying the image with no issues.
In my css I have
.portImage2:hover{
background-image: url(http://placekitten.com/g/263/167);
}
and the image never changes on hover. Can anyone tell me why?
The background image and the image are not the same image.
When you change the background image, you just change what is behind the image.
If, and only if, the image is translucent you can see the change.
.portImage2:hover{
background-image: url(http://placekitten.com/g/263/167);
}
<img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2">
If you want to change the image itself, then you need to change that (the content) and not the background.
.portImage2:hover{
content: url(http://placekitten.com/g/263/167);
}
<img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2">
You can't replace image inserted as IMG tag with CSS background property. Browser won't allow you to do that.
Either set the initial background on A element and change it using :hover pseudoclass, or use javascript to attach onMouseOver event and update src attribute dynamically.
Both ways are still bot perfect (or my description is too simplified) but this problem is very basic and it is described in almost every tutorial/introduction to HTML & CSS.
I'm trying to recolor a simple SVG image with CSS (as I saw here http://codepen.io/chriscoyier/pen/evcBu ):
My HTML:
<img src="http://dl.dropbox.com/u/12091580/rwdicon/icon-menu.svg" class="myMenu" alt="menu">
My CSS:
.myMenu { fill: red; }
It's not working (see http://jsfiddle.net/sexyzane/1hojaccb/ )!
What am I doing wrong?
fill is used for svg element markup, you have an img element with an svg source, as such you cannot use fill to change the image color.
Instead, if you want to colorize the image, you may want to look into applying a CSS filter effect to the img tag, although this may not be able to achieve the exact result you're after.
Demo Fiddle