I'm currently working on a SCSS Tic-tac-toe project and I'm struggling with the 'background-image' properties. My problem is I need to change the path of Image on hover but it doesn't work. Here is my code:
.XO-O:hover,
.XO-O:focus {
background-image: url(/img/icon-o-noir.svg);
background-color: $gris-clair;
}
I don't want to use the 'Path' method in html nor a JS script,
I've tried to use the fill: properties, but it won't work
Related
I'm trying to load my image which is inside src/images/hero.svg through css using background-image:url('./images/hero.svg') in codesandbox.folder structure.
Works fine when I try to access it inside function component with but with css it's not loadingcode
So you want to add images in the css:
so for adding images in css with the use of the url specified as follows :
code for adding background image in CSS:
background-image: linear-gradient(rgba (4,2,54,0.7),rgba(4,9,30,0.7)),url(url of the image);
I need to load, display and dynamically change the color of an SVG image in my Angular project by applying different CSS classes to it.
This question didn't help, since it makes use of the Modernizr library and I would like to avoid it. I don't want also to copy the d field in the path tag of the image I have directly in the html file of the Angular project because it would be a wall of text that I'm not willing to accept. I can accept instead the usage of an external dedicated library to achieve the correct outcome, like the ng-inline-svg, which I tried to use the following way:
<div class="svg1" aria-label="My icon"
[inlineSVG]="'./assets/images/icons/ApplyIcon.svg'">
</div>
Defying the following CSS class:
.svg1 {
color: green;
}
It loads the image perfectly as a regular img tag but if I try then to apply a custom class to it to change the image color, it doesn't work.
Furthermore, I tried to use the object tag the following way:
<div class="col-2">
<object
id="svg1"
data="./assets/images/icons/ApplyIcon.svg"
type="image/svg+xml">
</object>
</div>
But, again, if I apply a class to the object tag with the CSS directives color: green; or fill: green; nothing would change. Any idea to achieve what I want?
Use the svg element in component.html file and use [ngClass] directive to dynamically change the inner svg class based on the conditions.
example:
component.ts
data.state = "New" || "In-Progress" || "Completed" // this changes dynamically based on the data
component.html:
<svg <circle class="cls-3" [ngClass] = "{'New': 'blue', 'In-Progress':'orange','Completed':'green'}[data.state]" cx="8.21" cy="8.01" r="2.44" transform="translate(-3.22 8.89) rotate(-48.73)"/></svg> // inner class of svg element
component.css:
.blue {
fill:blue
}
.orange{
fill: orange
}
.green {
fill: green
}
I tried different ways to change img src SVG colors finally achieved using SVG as a mask and It's working as expected for me.
Angular HTML:
<div class="icon" [ngStyle]="{'mask': 'url(' + icon + ') no-repeat center', '-webkit-mask': 'url(' + icon + ') no-repeat center'}"></div>
Angular CSS
.icon {
background-color: #0000; // Here you can the svg color
}
In my case, I need to change the color of few paths and circle inside whole SVG element.
This fixed my problem: <svg>... <path [attr.fill] = "<color>" ... /> ...</svg>.
Use the setAttribute() property to change the color of the SVG,
document.getElementById("svg1").setAttribute("fill", "green");
fill: green;
works only for path element which is usually present in svg element.
color property is for font color and it won't work on svg element.
In your scenario you can below things
1) in your folder /assets/images/icons/ApplyIcon.svg edit svg icon and for that path
give attribute fill="green"
2) If you want to use that icon on multiple places with different color then above method
will not work because same color will get applied everywhere. In this case you can simply remove fill="color" from all path inside svg.
and after this you can apply css
fill:color;
In this case although fill:color is not applied on SVG it will traverse to child element path and hence it will work.
I recently faced this same issue and resolved it by generating a new Angular component and using my .svg file in place the the component's .html file.
For instance, updating the template path to point to your .svg, like this: templateUrl: './my-icon.component.svg'. You can then add Angular directives inside the SVG file.
Check out this example: https://levelup.gitconnected.com/using-svg-files-as-component-templates-with-angular-cli-ea58fe79b6c1
The accepted answer is good but then what if you have a bloated SVG?
we first need to transform the SVG or all SVG in the project using #ngneat/svg-icon
if the fill or stroke properties of elements in the SVG are set to currentColor, they will have the color defined for the containing DOM element,. So the color can easily be changed by changing the color style on the svg-icon element.
move your SVGs icons to src/assets/svg directory the run ng add #ngneat/svg-icon
this command installs the svg-icon to your project and automatically generates the svgs into ts files where the svgs are turned to objects containing
the name key : this is the generated name for the svg and will be used to identify the svg
the data key: this is essentially the svg code copied from the svg files
the generated svg can be found on the app/svg directory
looking at the app.module.ts file the SvgIconsModule is imported and it is declared in the #Ngmodule imports.
import all the svg you want to use in the project from the app/svg directory and put it in the array of icons exposed by the SvgIconsModule.
import { SvgIconsModule } from '#ngneat/svg-icon';
import { appMasterCardLogoIcon, appPaypalLogoIcon, appVisaLogoIcon } from './svg';
#NgModule({
...,
imports: [
BrowserModule,
SvgIconsModule.forRoot({
icons: [appApplePayLogoIcon,
appMasterCardLogoIcon,
appPaypalLogoIcon,
appVisaLogoIcon],
})
],
...
})
you can now use the svg-icon tag anywhere in your component, then the attribute key will be the generated name key (used in identifying the svg)
because the fill or stroke property is set to currentColor, we can then use the color attribute on the svg-icon to control the color
we can also add a class to the svg-icon tag and control the styling using ng-class
<svg-icon key={{payment.logoKey}} [ngClass]="{'selected-payment': payment.isSelected}"class="payment-logo"></svg-icon>
I'm creating a Spree store, and trying to make a button use an image instead of the default button that is included with the extension (and bootstrap). I can target the proper button in CSS, and deactivate the background color, border, etc. The background url doesn't work for the image (path: "app/assets/images/heart-icon.png"), but it works fine for any external image url.
I assume my problem lies within the asset pipeline, but I can't figure out the proper path to set as the url.
From my .css file:
form.new_wished_product button.btn.btn-info {
background: url(assets/heart-icon.png);
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
color: transparent;
border: none;
}
The button doesn't need to change when hovered or clicked -- it's just a simple image.
Thanks!
EDIT:
I saw the related question but thought mine was different because I had tried those solutions. I was trying to do this with plain CSS and changing the file extension to .css.scss worked for me.
Have you tried the image-url() helper instead of url()?
image-url('heart-icon.png');
This will find the asset within your site's file structure.
When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.
#main {
background: url("images/bg_grey.png");
}
I have this code into my main.css but GWT can't find the image (it is into the default images folder of my GWT-project).
With JAVA there are lots methods like GWT.getModuleBaseURL(), but, into the CSS, how can i recover the correct path for my image?
It's relative to the CSS location.
For example, if the CSS is in /css/myStyle.css, the path for the image would be ../images/bg_grey.png
In my view I can load a image with this line of code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div> (this works), but instead I want to load the image from the CSS file.
After reading arround, I have tried this:
#bglion {src: background:url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png', image);}
...but the picture won't load on the page.
How can I make it work?
(The image is in /assets/images)
I think you'll have to do a couple of things. Your CSS should probably be something more along the lines of this:
#bglion { background: image-url('BG-LION6.PNG'); }
background is the CSS property you're actually trying to set. src is not a CSS property. image-url is a Rails path helper that points to your image assets folder. I believe if you just use asset-url it points to your entire assets folder and you would still have to specify that your image is in the images folder.
Secondly, if your div no longer contains an image within it, it will collapse to a width and height of 0 cause there's nothing to define its dimensions. You'll have to add more CSS to the wrapper div to define the dimensions of the image. So something like this:
#bglion { background: image-url('BG-LION6.PNG'); width: 100px; height: 100px; }
Try to do this instead:
#bglion { background: url("/BG-LION6.png"); }
or
#bglion { background: url("/assets/BG-LION6.png"); }
Depending on which version of rails you're using and which folder you set your assets at.
When accessing assets, you should always make the path absolute instead of relative.
You can change your css file to have a css.erb extension and then do something like this
#bglion {
background-image: url(<%=asset_path "BG-LION6.png"%>);
}