Vue.js | Change Fill of a SVG via routerlink - html

the idea is, that I want to change the color of a SVG which is displayed on the header depending on the site you are on. So if I'm f. e. on "home", I want to have it displayed blue and if I am on "contact" i want to have it green.
Header, HTML
<router-link class="col-4 my-auto" to="/">
<svg class="wortmarke" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080.56 140.42"><path d="M120.22,131.13c8.49-1,13.54-5.26,13.54-12.53V24c0-9.69,0-11.71-13.94-14.75V3.23h14.75c24.44,0,31.92-.8,31.92-.8l1,.8s-6.67,8.69-6.67,25.46v87.49a67.2,67.2,0,0,1-1,11.31h29.1c16.36,0,20.81-7.68,30.91-27.88h7.88L219.22,138H154.77c-13.54,0-34.55.6-34.55.6Z"/><path d="M236.8,131.13c8.49-1,13.54-5.26,13.54-12.53V24c0-9.69-1-11.71-15.56-14.75V3.23h87.89c8.28,0,15.56-.8,15.56-.8L332,38.19h-7.87c1-20.81-5.66-24.45-21.83-24.45H279.84l-2.43,2.42V64.05h33.74l1.62-11.72,8.49-1.21V89.71H310.75V74.56H279.84L277.41,77v39.2a67.2,67.2,0,0,1-1,11.31h28.09c17.37,0,19.8-2.63,29.9-23.84h7.88L334.79,138H271.35c-13.53,0-34.55.6-34.55.6Z"/><path d="M357.63,131.13c9.09-1,14.55-5.26,14.55-12.53V31.72c0-12.93-3-18-16.37-22.43V3.23h5.86c9.9,0,26.47-.8,26.47-.8A47.74,47.74,0,0,0,396,12.93l70.71,74.56c2.63,2.82,5.86,6.66,8.29,9.69V25.26c0-8.89-.21-13.74-16.37-15.36V3.23h40.81l1,3.84s-13.94,3.64-13.94,20.41V139h-8.48L392,46.87a92.53,92.53,0,0,1-8.29-9.9V118.6a59.56,59.56,0,0,1-1,10.91l18.19,1.21-.81,6.67-42.43,1.21Z"/><path d="M579.88,85.67,567.15,50.11c-1.61-4.25-3.84-11.52-5-15.56L542.5,85.67,537.25,99.2l-11.31,29.7,17.37,2.23L542.1,138H502.5v-6.87c7.88-.81,11.72-5,13.54-9.5L562.91,4.24l12.32-2.62,44.25,115c3.44,9.09,6.47,13.94,14.14,15l-.8,6.47h-8.29c-9.49,0-39.4.8-39.4.8v-7.88c5.46-.2,10.31-2,8.09-8.08l-9.5-26.06Z"/><path d="M689.8,97.39h7.88c0,26.46,16.77,32.93,29.29,32.93,10.92,0,22-5.46,22-17.78C749,81,686.57,82,686.57,39c0-21.61,16-38.18,47.48-38.18C746,.81,759.3,3,770.21,4.65l-6.67,33.54h-7.87c.4-15.36-5.46-27.28-23.24-27.28-13.54,0-22,6.87-22,17.58,0,31.92,62.43,28.28,62.43,73.14,0,26.06-21,38.79-46.88,38.79-18.18,0-41.62-5.66-42.22-20.61C683.74,117.59,684.34,113.15,689.8,97.39Z"/><path d="M790.22,131.13c8.48-1,13.54-5.26,13.54-12.53V24c0-9.69-1-11.71-15.56-14.75V3.23h87.89c8.28,0,15.55-.8,15.55-.8l-6.26,35.76H877.5c1-20.81-5.66-24.45-21.82-24.45H833.25l-2.42,2.42V64.05h33.74l1.62-11.72,8.48-1.21V89.71h-10.5V74.56H833.25L830.83,77v39.2a67.2,67.2,0,0,1-1,11.31H857.9c17.38,0,19.8-2.63,29.91-23.84h7.88L888.21,138H824.77c-13.54,0-34.55.6-34.55.6Z"/><path d="M984.19.81c17.57,0,36.77,4.65,47.68,5.66l-6.06,31.72h-7.88c-.81-20.21-17.18-27.28-36-27.28-32.32,0-46.26,25.66-46.26,53.54,0,37.58,26.66,58.19,56.57,58.19a62.69,62.69,0,0,0,38.79-13.94l3.43,5.25s-13,26.47-54.75,26.47c-44.65,0-71.32-32.93-71.32-67.89C908.42,38.39,933.88.81,984.19.81Z"/><path d="M1064.8,109.1a15.66,15.66,0,1,1-15.55,15.76A15.78,15.78,0,0,1,1064.8,109.1Z"/><path d="M49.7,13.74c15.56,0,28.69,11.31,28.69,32.12,0,16-7.07,27.48-22.83,28.9-5,.53-9.36-.3-12.93-2.52V80a69.88,69.88,0,0,0,12.93,2.46C81.63,85.06,108.09,66.67,108.09,39c0-27.47-27.27-35.76-51.32-35.76H0V9.29A56.63,56.63,0,0,1,9.75,12C12.36,13.08,22.2,13.74,25,13.74H49.7Z"/><path d="M42.63,80c-1-.3-1.93-.61-2.84-.94L38.52,75.6l3.12-4c.32.23.66.44,1,.64V24.68a2,2,0,0,0-2-1.95H27.31A11.74,11.74,0,0,0,15.55,34.48c0,25.59,0,84.12,0,84.12,0,6.87-5.26,11.52-13.54,12.53v7.47l58-1.21.81-6.67-19.2-1.82a51.43,51.43,0,0,0,1-10.3Z"/><path d="M41.64,71.6l-3.12,4L39.79,79c.91.33,1.86.64,2.84.94V72.24C42.3,72,42,71.83,41.64,71.6Z"/></svg>
</router-link>
SCSS
.router-link-active {
color:#99CCCC;
fill:#99CCCC;
}
.wortmarke {
fill:#CCFF99;
size: 3vw;
transition: 250ms;
width:100%;
height:100%;
}
svg:hover.wortmarke {
fill:#0099CC;
}
svg:active.wortmarke {
fill:#99CCCC;
}
All other elements, which are triggered by .router-link-active and also use :hover or :active like <a> work perfectly fine, but the svg in particular doesn't respond to the command.
I already tried to convert the svg file into a font, but that didnt work out at all. Im seriously stuck and dont know what to do else.
I would be very grateful for any ideas.


If I understand the problem correctly, you want the logo to have a blue fill color when its router link is active, and green otherwise.
Since .router-link-exact-active is added to the <router-link>'s anchor tag when the link is clicked, you could use that as a selector to target the SVG's .wortmarke element with a fill color set to blue; and add a style to default the fill color set to green:
<style scoped>
.router-link-exact-active .wortmarke {
fill: blue; /* fill color when active */
}
.wortmarke {
fill: green; /* default fill color */
size: 3vw;
transition: 250ms;
width: 100%;
height: 100%;
}
</style>
demo

Related

How to show a button as effect while hovering over an image?

I have an image(class photo) in my webpage and a button(class btn) named "Add to Cart". I want it to work such that when someone hovers over the product image, the "Add to cart" button starts showing over the image while the opacity of the image decreases a bit. I cant quite figure out how to make the button appear when i hover over the image. I am quite new to web development so please help. What do i write in css such that the button is only visible on top of the image when mouse is being hovered over the image.
<div>
<img class="Photo">
<button class= "btn">
<div>
<style>
.btn:hover{
}
<style

In order to connect the image (class="photo") and the button (class="btn") you need some form of container (e.g. a div element with class="container") that contains both.
You can then use the transition css property, to do the smooth switch of opacity:
.btn {
display: none;
}
.container:hover .btn {
display: inline-block;
position: absolute;
}
.container:hover .photo {
opacity: 0.5;
transition: 0.3s;
}

How are themes implemented in CSS

I am currently using variables keeping track of colors for both light and dark themes (e.g. --light-background-color, --dark-background-color). This isn't too hard with two themes but seems a bit manual and if faced with more themes it becomes impractical.
I have seen things like night shift that apply CSS filters which invert the colors on a webpage. How do these filters work? and how would I go about implementing them?

One way to go about this is to have a set of general theme color variables, rather than specific color variables for specific themes like you're trying to do here.
You can define these variables in the body element and override them with the class or a custom attribute of the body.
Use these variables as you would normally for your other HTML elements, and just change the attribute of the body element to apply a different theme.
The important part here is to make sure your theme color variables have corresponding contrasting color variables as well, so that things like white text on a dark background can swap to dark text on a white background.
Here's an example, where primary and secondary theme and contrast colors are defined in the body element, and are overridden when the body has the "dark" class applied to it:
document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("dark"));
body {
--color-primary: #b4e9ce;
--color-primary-contrast: #000000;
--color-secondary: #308d43;
--color-secondary-contrast: #ffffff;
/* Other theme colors... */
}
body.dark {
--color-primary: #202d26;
--color-primary-contrast: #ffffff;
--color-secondary: #8f8f8f;
--color-secondary-contrast: #000000;
/* Other theme colors... */
}
button {
padding: 10px;
margin-bottom: 20px;
}
.wrapper {
padding: 20px;
background-color: var(--color-primary);
border: solid var(--color-secondary) 10px;
}
.wrapper h1 {
font-family: sans-serif;
text-align: center;
color: var(--color-primary-contrast);
}
<body>
<button>Toggle Theme</button>
<div class="wrapper">
<h1>Hello World</h1>
</div>
</body>

Single Line CSS will change Light Theme to Dark:
<style>
body
{
filter: invert(1);
}
</style>

feather icon color is not changing in Angular

I have a feather icon in my Angular project and I'm trying to use my primary color from color theme page but some reason I can't change the color.
HTML
<i-feather name="search"color="primary" class="icon"></i-feather>
CSS
.icon{
height: 40px;
width: 40px;
}
Note: I was able to change normally like color: blue; in my css file but it's not how I want to do. I want to reuse my primary color so that I can just change from global css later on.
styles-theme.scss
#mixin app-base-theme($theme) {
$primary: map-get($theme, primary);
.i-feather {
color: mat-color($primary);
}
It supposed to be the same color like the bar underneath
Any help or suggestion on how should I do. tx

How to change the text color and background color of ant-tooltip component

I implemented antd tooltip but need to change the background color and text color of it but I am unable to achieve that. I tried to do using "overlayStyle" provided by antd tooltip component but no luck not working as expected. As Shown below.
<Tooltip
title={jobNumber * 3}
placement="bottomRight"
overlayStyle={{
color: "orange",
background: "blue",
}}
>
<div style={{ maxWidth: `${jobNumber * 3}px` }} />
</Tooltip>;
I tried inspecting it but unable to do so as its work on hover and till the time I move my cursor to class but no help.
What I founded on hover the div added one class named 'ant-tooltip-open' but what's that in the class I can't see.

You can do this easily, see below code
.ant-tooltip-inner {
color: yellow;
background-color: green;
}
.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
border-bottom-color: green;
}
here is working demo https://codepen.io/anon/pen/JVvyGr

I hope this can useful for you.
In order to change the color of the ant tooltip arrow use:
.ant-tooltip-arrow::before{
background-color: white;
}

In order to change the color of the arrow use this:
.ant-tooltip-arrow-content{
background-color: #fafafa !important;
}
because it stays as black even when changing the background color of the tooltip and apparently this line of code didn't work for me in Chrome:
.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
border-bottom-color: green;
}

CSS filter - color blue but keep white white

I have an image of a floppy disk that I want to recolor blue whenever hovered. I was wondering if anyone knows how to apply a CSS filter like this to only color the already non-grey elements of the image?
Current CSS:
.saveIcon:hover {
cursor: pointer;
filter: grayscale(20%) brightness(70%)
sepia(100%) hue-rotate(-180deg) saturate(300%)
contrast(1);
}
Image (full-size):
Expected result(ish):

I think a simple hue-rotate() will do it. Simply adjust the degree to obtain the color you want:
img {
width: 200px;
}
img:hover {
filter: hue-rotate(40deg);
}
<img src="https://i.stack.imgur.com/2P1q3.png">

You can use hue-rotate() and grayscale() combination to get same color
.saveIcon:hover {
cursor: pointer;
filter:hue-rotate(40deg) grayscale(30%);
}
<img src="https://i.stack.imgur.com/2P1q3.png" class="saveIcon" width="200">