React.js - 使用 svg 线性渐变不起作用

Question

我有一个圆圈和一个渐变来填充它， 我放入渐变并按样式填充在路径中调用他。

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>

它不起作用，有什么建议吗？

Answer 1

在React中，线性渐变的属性形式有点不同，应该是这样的：

<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

Answer 2

对于后来来这里的其他人来说，对于一种或几种款式来说，

style={{fill:'url(#linear-gradient)'}}

是不必要的。相反，简化为

fill="url(#linear-gradient)"

。这同样适用于其他常见的 SVG 样式，例如

stroke="url()"

。

Answer 3

可能不是完全有用，但如果您加载了多个 SVG，请确保 LinearGradient id 是唯一的。在我之前的例子中，两个 LinearGradient id 都是 id="linear-gradient" ，因此第二个 SVG 实际上遵循第一个 SVG 渐变。

Answer 4

对于路过的人：渐变不起作用的另一个原因是其 ID 包含非 ASCII 字符（如“é”）。 我遇到这种情况是因为 Adobe Xd 导出时 ID 为“Dégradé_par_defaut”，这在法语中表示 default_gradient :)

Answer 5

请关闭路径标签即可工作。