Menu
I have a circle and a gradient to fill in it, I put in the gradient and call him in path by style fill.
import React,{PropTyoes} from 'react';
import {connect} from 'react-redux';
import * as Actions from '../controllers/Actions';
export default class MyComp extends React.Component {
constructor(props, context){
super(props, context);
}
render(){
return (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 983.4 983.4">
<g>
<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="1041.6901" y1="169.485" x2="1383.9301" y2="169.485" gradientTransform="matrix(1 0 0 -1 -761.14 398.97)">
<stop offset="0.14" stop-color="#2f343b" stop-opacity="0"/>
<stop offset="0.43" stop-color="#337082" stop-opacity="0.41"/>
<stop offset="0.67" stop-color="#369fb9" stop-opacity="0.73"/>
<stop offset="0.79" stop-color="#37b1cf" stop-opacity="0.85"/>
</linearGradient>
<path id="gradient" style={{fill:'url(#linear-gradient)'}} className="cls-200" d="M622.8,119.6C512.1,72,385.5,78.9,280.6,138.1l134.3,232.6c31.2-16.8,68.2-18.5,100.9-4.8 L622.8,119.6z">
</g>
</svg>
it's not working, any suggestions?
642
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
To use a gradient, we have to reference it from an object's fill or stroke attributes. This is done the same way you reference elements in CSS, using a url . In this case, the url is just a reference to our gradient, which I've given the creative ID, "Gradient". To attach it, set the fill to url(#Gradient) , and voila!
To add a linear-gradient background in a React component, we can put the linear-gradient value in the style prop object. to set the background property to "linear-gradient(#e66465, #9198e5)" . Now we should see the linear gradient background on the div.
In react the attributes form of linear gradient are a bit different and supposed to be like this:
<linearGradient
id="linear-gradient"
gradientUnits="userSpaceOnUse"
x1="1041.6901"
y1="169.485"
x2="1383.9301"
y2="169.485"
gradientTransform="matrix(1 0 0 -1 -761.14 398.97)"
>
<stop offset="14%" stopColor="#2f343b" stopOpacity="0%" />
<stop offset="43%" stopColor="#337082" stopOpacity="41%" />
<stop offset="67%" stopColor="#369fb9" stopOpacity="73%" />
<stop offset="79%" stopColor="#37b1cf" stopOpacity="85%" />
</linearGradient>
It mean that the syntax should be from stop-color => stopColor
offset should be in percentage
ReactJs + svg
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With