我有一个圆和一个要填充的圆,我放入了渐变,并通过样式填充在路径上称呼他。
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>
它不起作用,有什么建议吗?
在反应中,线性梯度的属性形式有些不同,应该是这样的:
<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>
它的意思是语法应该来自stop-color => stopColor
偏移量应为百分比
ReactJs + SVG