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

Posted 2023-02-21

【中文标题】React.js - 使用 svg 线性渐变不起作用

【英文标题】：React.js - use svg linear gradient not working

【发布时间】：2016-10-24 01:02:50

【问题描述】：

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

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>

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

【问题讨论】：

渐变颜色变化与形状不在同一位置。

什么意思？ @罗伯特朗森

渐变覆盖了由gradientTransform变换的x1、x2、y1和y2定义的区域。该区域不覆盖形状的边界框。

如果我将它从反应组件中移出，它工作得很好@RobertLongson

我试过时没有，但没问题。 react 组件是否生成了<base> 元素？

【参考方案1】：

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

<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

【讨论】：

为什么偏移量应该是百分比？

这解决了我的 SVG 线性渐变问题。我正在使用 react-inlinesvg 并且这个问题没有被它解决。必须将 SVG 转换为组件并进行这些修复以使其再次工作。

偏移量不需要是百分比

【参考方案2】：

对于稍后来这里的其他人，style=fill:'url(#linear-gradient)' 对于仅一种或几种样式是不必要的。相反，简化为fill="url(#linear-gradient)"。这同样适用于其他常见的 SVG 样式，例如 stroke="url()"。

【参考方案3】：

对于路过的任何人：渐变不起作用的另一个原因是其 ID 是否包含非 ASCII 字符（如“é”）。 发生在我身上是因为 Adob​​e Xd 使用 ID“Dégradé_par_defaut”导出它，这意味着法语中的 default_gradient :)

【讨论】：

感谢您救了我的命。我的渐变中有“：”，但它们不起作用。