I have a svg with different paths, ellipses etc. They have different fill colours. Say red & blue. Now, I put them all into a sprite, and would now like to modify fill colour with css on hover, so what I would normally do is remove the fills from the svg and do everything with css' fill property.
However, since I have different colours here, I cannot simply do fill:red, since everything will be red, but I want some of it to be blue.
You can add a different class to each of the paths:
<circle class="circleClass" cx="40" cy="50" r="26"/>
<square class="squareClass" cx="40" cy="50" r="26"/>
Then target those classes in your CSS:
.circleClass {
fill: red;
}
You can add a class to every path or you can use the nth-child.
Here is an easy example:
<path bla-bla-bla>
<path bla-bla-bla>
<path bla-bla-bla>
path:nth-child(1){
fill:red;
}
path:nth-child(2){
fill:blue;
}
path:nth-child(3){
fill:green;
}
What you are doing can't work. Anything referenced via a <use> is not present in the DOM under the <use> element.
.icon:hover .outer { }
won't work because the path with class outer is not a descendant of .icon. If you want to style the contents of a symbol, you need to do it by applying the ruules directly to the symbol. For example:
#btn-tester .outer { }
Unfortunately :hover events don't apply to symbols. So you can't do:
#btn-tester:hover .outer { }
Even if that worked, you may not want to do that anyway. If there were any other uses of the symbol on the page, it would change them also.
You probably are going to have to just inline the SVG on the page where you want it. Instead of using a symbol.
Related
I have an SVG image and I'm looking to change part of its color.
The SVG will always consist of 2 colors, i.e. black & yellow
I'm looking to change the yellow color with a css class, so I could switch to another color theme easily without creating all the svg buttons in the yellow version.
Is this at all possible? I can't seem to find much online about this..
The SVG is set on span/div's using a class with background-image
If i implement the tag with SVG then I can change the color with css. But I'm looking to use it as a class if possible (and the svg should not be directly in the html)
<svg>
<use xlink:href="#robot" id="robot-1" />
</svg>
Turorial:
https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
JsFiddle:
https://jsfiddle.net/wahjvmnq/
You can change all the paths using --secondary-color to be fill: currentColor and then wrap the SVG with an HTML element that has a CSS class or styles applied to it that updates the color property.
After updating the path's in the SVG that currently use --secondary-color:
<div style="color:red;">
<svg>
<use xlink:href="#robot" id="robot-1" />
</svg>
</div>
Here is an example on jsFiddle where the yellow has been changed to red.
You can not override the SVG colors with CSS unless it is part of the HTML document.
I am trying to avoid having to <use class="myicon" xlink:href="myicon" /> by simply targeting the value of the xlink:href attribute when styling my SVGs. None of the following selectors seem to work:
[xlink|href*=myicon], // I also set the namespace at the top of the file
[xlink:href*=myicon],
[xlink\:href*=myicon] {
color: yellow !important;
}
A few other questions on the site seem to imply that styling using the attribute selectors on namespaced attributes should be possible, even though plain html has no support for namespaced attributes, as it should just regard them as one word. But I cannot get it to work, so I am losing faith in just that.
As Blake Mann says, if you're listing all your selectors together like that, it won't work because [xlink:href*=myicon] is invalid, which causes your entire ruleset to be dropped. If you're trying different selectors, you need to try them one at a time.
[xlink|href*=myicon] works just fine, but make sure you've specified the XLink namespace and not the SVG namespace:
#namespace xlink 'http://www.w3.org/1999/xlink';
html {
background-color: black;
}
[xlink|href*=myicon] {
fill: yellow;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="myicon" y="16">Icon</text>
</defs>
<use xlink:href="#myicon" />
</svg>
You were definitely on the right track with what you were doing.. in fact, you have the right answer:
[xlink\:href*=myicon] {
color: yellow !important;
}
The reason it isn't working is because the first two selectors you tried were invalid (both the | and : characters need to be escaped), and if a CSS selector contains invalid characters, the whole selector group gets thrown out.
Check this example as proof... the div (just using a div for simplicity, even though that's not quite right) should get set to be red, as that rule comes after the blue one, but because the selector group gets thrown out, that rule won't get applied. The other selector that does not have the invalid characters will apply though!
[xlink\:href*=myicon] {
color: blue;
}
[xlink|href*=myicon],
[xlink:href*=myicon],
[xlink\:href*=myicon] {
color: red;
}
<div xlink:href="myicon">Lorem Ipsum</div>
My team are shifting to svg icons.
We use to define the icons in css style classes, and are now considering whether SVG icons should be implemented as view component rendering svg markup (instead of html). This should allow for better reuse svg by changing dimensions, color etc. On the other hand this takes the icons out of the styling domain and any style change will cause code change (and not only css change).
Whats is the right way (if there any) to work with svg icons, control size and colors, and still save style layer and view layer?
SVG editors sometimes put style information inline, but style information for SVGs can also be provided inside <style> tags, as usual CSS.
If the SVG is in your DOM (the simplest way to do this, is to write the SVG directly into your HTML) the SVG can be formatted directly from your usual CSS file:
p {
color: #666;
}
.blueTriangle {
fill: lightblue;
stroke: #666;
stroke-width: 8;
}
<p> This is usual text in HTML p tags. </p>
<p> The next thing is embedded SVG, styled by usual CSS: </p>
<svg width="250" height="120">
<path class="blueTriangle" d="M150 20 L130 90 L170 90 Z" />
</svg>
With transform also scaling and rotations can be done, showing different components can be accomplished via display, visibility or opacity with different implications.
Changing paths themselves would be considered as changing the content of the file and can be done via JavaScript. Therefore the separation of style an content can still be preserved.
I am fairly new to SVG but how can I display a SVG icon and change its color using inline CSS? For example, if I wanted to change the color of example.svg to #FFF000 how would I do that?
I tried searching online but I couldn't find anything.
collinksmith did answer your question but didn't explain that you cannot change the colour of a .svg file with CSS. You need to add the SVG inline then you can apply CSS to it.
You need to use the fill property of the svg's path. Assuming an svg html element, with a class set on the svg element itself:
.class-name path {
fill: red;
}
EDIT Here's an example: https://jsfiddle.net/4447zb7o/
EDIT 2 To set the css inline, change the style attribute of the path element inside the svg:
<svg class="my-svg" height="210" width="400">
<path style="fill: green" d="M150 0 L75 200 L225 200 Z" />
</svg>
I'm unsure of the proper markup to structure, select, and style individual SVG instances called from a common inline SVG "template" within an HTML file.
<!-- first instance to style -->
<svg id="instance1" viewBox="0 0 799.9 177.8">
<use xlink:href="#template">
</svg>
<!-- second instance, want different styles -->
<svg id="instance2" viewBox="0 0 799.9 177.8">
<use xlink:href="#template">
</svg>
In my SVG template, I have a group <g> of several paths, each of which is given a class name. I've given that SVG group an id of template, and am calling instances of it.
<!-- first instance to style -->
<svg id="instance1" viewBox="0 0 799.9 177.8">
<use xlink:href="#template">
</svg>
<!-- second instance, want to apply different styles -->
<svg id="instance2" viewBox="0 0 799.9 177.8">
<use xlink:href="#template">
</svg>
Now I'm attempting to select/style elements these instances in CSS as follows (though this syntax doesn't work!):
/* want to style each instance differently */
#instance1 .outline {
fill: red;
}
#instance2 .outline {
fill: green;
}
I assume this is easy, but I can't figure out the correct way to select/style these individual SVGs that <use> a common set of paths.
Any ideas? Thanks!
Code snippet available for review at http://codepen.io/edhebert/pen/GgmKOo
Contents of <use> are cloned into a shadow DOM and hence cannot be directly selected and styled using CSS the normal straightforward way that we know.
Before going further,note that you can apply styles to the contents of a <use> element by applying the styles to the <use> itself. For example, by doing this:
<svg id="instance1" viewBox="0 0 799.9 177.8">
<use xlink:href="#template" fill="maroon">
</svg>
.. the descendants of <use> will inherit the fill color from the <use> element. But all descendants will inherit this color.
If you want to apply a specific color to only one element inside <use>, for example, another technique can be used. This technique is, however, currently limited.
The technique works by taking advantage of the CSS currentColor variable. Fabrice Weinberg wrote about this technique in this blog post over at Codepen.
Basically, if you have an SVG element that you want to reuse, instead of specifying a fill color inside the "template" on each path, you do this instead:
<g>
<path fill="currentColor" d="..." />
</g>
And then, in your CSS, you can specify the color that you want, knowing that this color will be applied to the above path—because this is how currentColor works.
use#instance1 {
fill: deepPink; /* will be inherited by contents of `use` */
color: #eee; /* will be inherited by the path element */
}
Someone else took this technique further by using user-defined CSS variables to do the exact same thing. You can read about it here. The CSS variables technique is the same as Weinberg's technique, except that you can define as many variables as you want, use them inside your template, and then specify their values in your CSS—these values will then be used by these variables wherever you have defined them inside the template.
This technique works, but CSS variables are currently only supported in Firefox—so I don't suppose you would use it in production.
Hope this helps.