I am using the React-PDF library and wanting to add a banner across the page with a radial gradient, something simple. However, when I apply the CSS property I've been using in my app, it doesn't seem to accept it...
I have been attempting to use
backgroundColor: 'radial-gradient(105.71% 103.23% at 74.11% 75.76%, #0d0173 0%, #1704b8 100%)',
Loading the page then gets the error:
I can apply a single colour easily enough, like backgroundColor: '#0d0173';, but of course I want the radial background :-/
This is how I am using it:
const styles = {
container: {
backgroundColor: 'radial-gradient(105.71% 103.23% at 74.11% 75.76%, #0d0173 0%, #1704b8 100%)',
/* other css */
},
logo: { /* some logo css */ },
title: { /* some title css */ }
};
return (
<View style={styles.container}>
<Image style={styles.logo} src={logo} />
<Text style={styles.title}>Some text here</Text>
</View>
);
In CSS, the built-in gradients use background-image rather than background-color --- as the error message tells you, it's failing to parse the color, because a gradient defintion is not a color.
Unfortunately, the solve is not just to change to background-image, as it's not supported by React PDF.
Instead, you can use an embedded SVG element to achieve the same effect, something like:
<View style={styles.container}>
<Svg viewBox="0 0 10 10" width="100">
<Defs>
<RadialGradient id="radialGradient">
<Stop stop-color="#0d0173" />
<Stop offset="100%" stop-color="#1704b8"/>
</RadialGradient>
</Defs>
<Rect width="100%" height="100%" fill="url(#radialGradient)" />
</Svg>
</View>
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 I read the specs of an SVG file, I cant work with if-then statements.
I'm struggling with how to solve the hover styling of the stroke that is linking the two circles. In other words, how do I style an element in an SVG file when the element is
outside the trigger element
AND
based on the currently active page/active circle
I would appreciate help to find a way to do this - or alternative ways.
Thanks.
It can be done fairly simply. But it requires a little javascript.
Here's a simplified example with just three circles. Hopefully it should be obvious how to add the other two circles and the rest of the lines. The JS and CSS should work as is for any number of circles and lines.
window.addEventListener('DOMContentLoaded', (event) => {
var allCircles = document.querySelectorAll("circle");
// Add an click handler to every circle that
// adds the class "active" to the clicked circle.
allCircles.forEach(element => {
element.addEventListener("click", clickHandler);
element.addEventListener("mouseover", mouseoverHandler);
element.addEventListener("mouseout", mouseoutHandler);
});
});
function clickHandler(evt) {
// Clear current selection (remove class "active" from any circle)
allCircles.forEach((circle) => circle.classList.remove("active"));
// Mark clicked circle selected
evt.target.classList.add("active");
// Clear any currently highlighted lines
clearHighlightedLines();
}
function mouseoverHandler(evt) {
let activeCircle = document.querySelector("circle.active");
let hoveredCircle = evt.target;
if (activeCircle && (activeCircle != hoveredCircle)) {
// Get the line that has classes matching both the actibve and hovered circle
let line = document.querySelector("line."+activeCircle.id+"."+hoveredCircle.id);
// Add the class "highlight" to that line
if (line)
line.classList.add("highlight");
}
}
function mouseoutHandler(evt) {
clearHighlightedLines();
}
function clearHighlightedLines() {
// Find the line with class "highlight" (if any)
var line = document.querySelector("line.highlight");
// Remove the class "highlight"
if (line)
line.classList.remove("highlight");
}
#c3 {
fill: maroon;
}
#c4 {
fill: steelblue;
}
#c5 {
fill: rebeccapurple;
}
circle:hover:not(.active) {
stroke: #999;
stroke-width: 1.5;
}
circle.active {
stroke: black;
stroke-width: 1.5;
}
line {
stroke: gold;
stroke-width: 1;
}
line.highlight {
stroke: black;
}
<svg viewBox="0 0 100 100">
<!-- line from c3 to c4 -->
<line x1="75" y1="40" x2="25" y2="70" class="c3 c4"/>
<!-- line from c3 to c5 -->
<line x1="75" y1="40" x2="57" y2="70" class="c3 c5"/>
<!-- line from c4 to c5 -->
<line x1="25" y1="70" x2="57" y2="70" class="c4 c5"/>
<circle id="c3" cx="75" cy="40" r="10"/>
<circle id="c4" cx="25" cy="70" r="10"/>
<circle id="c5" cx="57" cy="70" r="10"/>
</svg>
CodeSandbox with example:
https://codesandbox.io/s/floral-surf-l7m0x
I'm trying to rotate 180ยบ a circle element inside an SVG. I'm being able to do it with the regular <circle> tag, but I'm not being able to do it with the styled component styled.circle
LS.Svg_SVG = styled.svg`
border: 1px dotted silver;
width: 100px;
height: 100px;
`;
LS.Circle_CIRCLE = styled.circle`
stroke-dasharray: 289.0272;
stroke-dashoffset: -144.5136;
transform: rotate(180 50 50); /* <------------ IT DOES NOT WORK */
`;
export default function App() {
return (
<React.Fragment>
<LS.Container_DIV>
<LS.Svg_SVG viewBox="100 100">
<circle /* USING REGULAR <circle> */
cx="50"
cy="50"
r="46"
stroke="black"
strokeWidth="8px"
fill="none"
strokeDasharray="289.0272"
strokeDashoffset="-144.5136"
transform="rotate(180 50 50)" /* <----------------- IT WORKS */
/>
</LS.Svg_SVG>
</LS.Container_DIV>
<LS.Container_DIV>
<LS.Svg_SVG viewBox="100 100">
<LS.Circle_CIRCLE /* USING STYLED COMPONENTS */
cx="50"
cy="50"
r="46"
stroke="black"
strokeWidth="8px"
fill="none"
/>
</LS.Svg_SVG>
</LS.Container_DIV>
</React.Fragment>
);
}
The result I'm getting:
They both should be the same. The first one is rotated (using regular <circle>). The second one is not rotated (using styled-components). Even though I'm setting transform: rotate(-180 50 50); in the styled component.
In CSS, units are required (ie. 180deg, 50px)
The SVG-specific version of rotate: rotate(angle, cx, cy), is not supported in the CSS version of transform. You'll need to use transform-origin.
LS.Circle_CIRCLE = styled.circle`
stroke-dasharray: 289.0272;
stroke-dashoffset: -144.5136;
transform: rotate(180deg);
transform-origin: 50px 50px;
`;
I using vue-simple-svg package and Vue.
I sending icon and color to component:
<IconComponent name="comment.svg" color="#ffffff" />
In IconComponent I get props:
<simple-svg
:src="image"
fill-class-name="fill-to-change"
:fill="color"
stroke-class-name="stroke-to-change"
:stroke="color"
custom-id="my-id"
custom-class-name="my-class"
/>
props: {
image: {
type: String,
required: true,
},
color: {
type: String,
required: true,
},
},
But color not change to #ffffff.
So I trying change color using CSS:
I have structure svg file with color:
svg => g => g
I have class .my-class, and I write code:
.my-class g g {
fill: #ffffff;
stroke: #ffffff;
}
I tryimg using:
.fill-to-change {
fill: #ffffff;
}
.stroke-to-change {
stroke: #ffffff;
}
but color not change to white.
File SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 59.1 (101010) - https://sketch.com -->
<title>afb3c770-9343-4219-b68b-48905c19ec63#1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
<g id="Icons-/-Interfaces-/-user-plus" fill="#000000">
<path d="M17,19 L17,16.5 C17,16.2238576 17.2238576,16 17.5,16 C17.7761424,16 18,16.2238576 18,16.5 L18,19 L20.5,19 C20.7761424,19 21,19.2238576 21,19.5 C21,19.7761424 20.7761424,20 20.5,20 L18,20 L18,22.5 C18,22.7761424 17.7761424,23 17.5,23 C17.2238576,23 17,22.7761424 17,22.5 L17,20 L14.5,20 C14.2238576,20 14,19.7761424 14,19.5 C14,19.2238576 14.2238576,19 14.5,19 L17,19 Z M14.0425135,13.5651442 C13.4188979,13.8445863 12.7275984,14 12,14 C11.2738711,14 10.5838946,13.8452135 9.96126583,13.5668358 L5.87929558,15.4222768 C5.34380416,15.665682 5,16.1996113 5,16.7878265 L5,17.5 C5,18.3284271 5.67157288,19 6.5,19 L11.5,19 C11.7761424,19 12,19.2238576 12,19.5 C12,19.7761424 11.7761424,20 11.5,20 L6.5,20 C5.11928813,20 4,18.8807119 4,17.5 L4,16.7878265 C4,15.8074678 4.57300693,14.9175857 5.46549264,14.5119103 L8.92215823,12.9406987 C7.75209123,12.0255364 7,10.6005984 7,9 C7,6.23857625 9.23857625,4 12,4 C14.7614237,4 17,6.23857625 17,9 C17,10.5929224 16.2551051,12.0118652 15.0946468,12.927497 L17.6966094,14.0402775 C17.9505071,14.1488619 18.0683068,14.4427117 17.9597225,14.6966094 C17.8511381,14.9505071 17.5572883,15.0683068 17.3033906,14.9597225 L14.0425135,13.5651442 L14.0425135,13.5651442 Z M12,13 C14.209139,13 16,11.209139 16,9 C16,6.790861 14.209139,5 12,5 C9.790861,5 8,6.790861 8,9 C8,11.209139 9.790861,13 12,13 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
I have other solution. I added to scss file filter for example:
&__image {
filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg) brightness(104%) contrast(88%);
}
To convert the color to the filter format (for example: #ef4f10) use CSS filter generator to convert from black to target hex color.
The best effest is when default color in SVG file is black: fill="#000000".
Use CSS On SVG
svg{
fill: #fff;
stroke: #fff;
}
Hope it will work for you
add !important at the end of style.
eg
.class g g{
fill:#fff!important;
}
#michal
Remove 'fill=""' property from all tag inside svg tag, then you will get result.
The best thing you can do is to bind to attribute
<path v-bind:fill="this.skinColorContent"
export default {
data() {
return {
skinColorContent: 'red',
}
},
}
I have a component.html that transcludes my svg component:
<masterflex-sidebar>
<masterflex-logo sidebar-logo color="white">
</masterflex-logo>
</masterflex-sidebar>
My logo.ts file:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'masterflex-logo',
templateUrl: './masterflex.component.html',
styleUrls: ['./masterflex.component.scss']
})
export class MasterflexComponent implements OnInit {
#Input() color:string
constructor() { }
ngOnInit() {
}
}
My svg component(part of it):
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 237.4 35.9"
height="35.9"
width="237.4"
xml:space="preserve" *ngIf="color">
I want to be able to change the color of my svg component to whatever color I want (set in my first component with color="white") and have that color apply to my svg. Is there a way to pass that color attribute into a scss style?
An SVG element has a stroke and a fill color. You can set each one with the corresponding element or style attribute:
<svg [attr.stroke]="color" ... >
<svg [style.stroke]="color" ... >
<svg [attr.fill]="color" ... >
<svg [style.fill]="color" ... >
The color input property of the component must be set in the parent component:
<my-svg-component [color]="myCustomColor" ...>
You can try the code in this stackblitz. Please note that if shape and text elements inside of the SVG element set their own stroke or fill colors, these will override the color set at the SVG element level.
Try doing this,
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 237.4 35.9"
height="35.9"
width="237.4"
xml:space="preserve"
style="color: {{color}}" *ngIf="color">
Or apply it similarly to each style rule you have within your <svg></svg> tags. Not sure if it is fill instead of color you are after since it is an svg. See if it worked or not.