visx/gradient 渐变组件完全指南从预设渐变色到自定义 linear/radial 渐变【免费下载链接】visx visx | visualization components项目地址: https://gitcode.com/gh_mirrors/vi/visxvisx/gradient 是 visx 可视化组件库中专用于 SVG 渐变的 React 封装模块。本文以 packages/visx-gradient/Readme.md 为核心结合仓库源码与测试系统讲解预设渐变组件如 GradientPinkBlue、LinearGradient/RadialGradient 两个自定义基础组件以及“渐变是被定义defined而非渲染rendered”这一关键心智模型。读完本文你将能够在 visx 图表中正确声明、引用和定制任意线性/径向渐变并为柱状图、面积图等填充渐变背景。安装npm install --save visx/gradient模块的 peerDependencies 为react与types/react^18.0.0 || ^19.0.0其中types/react为可选对应 package 声明见 packages/visx-gradient/package.json。它属于纯渲染型组件sideEffects为false可按需 tree-shaking。如果你使用 yarn 或 pnpm等价命令为yarn add visx/gradient或pnpm add visx/gradient。快速上手用预设渐变填充一个面积图Readme 给出了一段最小可用示例用预设的GradientPinkBlue为AreaClosed提供渐变填充import { AreaClosed } from visx/shape; import { GradientPinkBlue } from visx/gradient; const GradientArea () { return ( svg GradientPinkBlue idgradient / AreaClosed fillurl(#gradient) / /svg ); };这个示例包含三个关键动作在svg内部通常是所有图形元素之前放置GradientPinkBlue idgradient /声明一个渐变“变量”给渐变赋予一个唯一的idReadme 强调id应在整个页面元素中唯一在目标图形上通过fillurl(#gradient)引用该 id。需要特别说明id的作用域defs内的渐变 id 实际上是文档级共享的因此如果页面存在多个 SVG务必保证id全局唯一否则可能出现渐变被意外覆盖的问题。这也是visx/gradient各组件把id设为必填 prop 的原因。关键心智模型The Definition Caveat“定义”而非“渲染”Readme 用了一个专门的章节来解释渐变的工作方式这一节是整个模块理解上的核心原文观点如下Like patterns, gradients are defined. When you renderGradientPinkBlue /, its rendering alinearGradient/element inside adefin the SVG. Its often better to think of these as variable definitions rather than true DOM elements. When you usefillurl(#gradient)youre referencing the gradients id:gradient.翻译并展开为工程实践要点渐变是“被定义”的渲染GradientPinkBlue /并不会直接产生可见图形而是在 SVG 的defs中生成一个linearGradient/定义节点把它当作变量声明而非 DOM 元素渐变本身不可见只有被fillurl(#id)或strokeurl(#id)引用时才产生视觉效果引用方式fillurl(#gradient)中的#gradient正是GradientPinkBlue idgradient /声明的 id。这一实现可以直接在源码中验证LinearGradient.tsx 与 RadialGradient.tsx 的返回值都包裹在defs中defs linearGradient id{id} ... {/* stop 节点 */} /linearGradient /defs测试用例也印证了这种用法如 LinearGradient.test.tsx 所示测试在svg内直接渲染LinearGradient idlinear /并断言不抛错而不是断言其渲染出可见的图形元素。十个开箱即用的预设渐变从 src/index.ts 可以看到visx/gradient共导出 10 个预设渐变组件外加LinearGradient、RadialGradient与对应的 Props 类型组件默认from起始色默认to结束色源码GradientDarkgreenGreen深绿绿GradientDarkgreenGreen.tsxGradientLightgreenGreen浅绿绿GradientLightgreenGreen.tsxGradientOrangeRed橙红GradientOrangeRed.tsxGradientPinkBlue#F02FC2#6094EAGradientPinkBlue.tsxGradientPinkRed粉红GradientPinkRed.tsxGradientPurpleOrange#7117EA#EA6060GradientPurpleOrange.tsxGradientPurpleRed紫红GradientPurpleRed.tsxGradientPurpleTeal紫青GradientPurpleTeal.tsxGradientSteelPurple钢蓝紫GradientSteelPurple.tsxGradientTealBlue#17EAD9#6078EAGradientTealBlue.tsx每个预设组件本质都是对LinearGradient的一层薄封装只预填from/to两个默认色其余所有 props 原样透传。以 GradientPinkBlue.tsx 为例export default function GradientPinkBlue({ from #F02FC2, to #6094EA, ...restProps }: LinearGradientProps) { return LinearGradient from{from} to{to} {...restProps} /; }因此预设组件的“预设”只是默认值你随时可以通过 props 覆盖颜色、方向、透明度等全部细节详见下文参数表。Gradients.test.tsx 为全部 10 个预设组件逐一编写了“可渲染不崩溃”的测试用例保证它们都能在svg中正常声明。自定义渐变LinearGradient 与 RadialGradientReadme 的 “Make your own!” 章节给出了两种自定义方式import { LinearGradient, RadialGradient } from visx/gradient; LinearGradient from#a18cd1 to#fbc2eb /; RadialGradient from#a18cd1 to#fbc2eb /;LinearGradient线性渐变对应实现见 LinearGradient.tsx。它渲染linearGradient元素完整 props 说明如下未特别标注的均有默认值Prop类型默认值说明idstring必填渐变的唯一 id应在整个页面唯一fromstring—起始颜色对应第一个stoptostring—结束颜色对应第二个stopx1/y1string \| number见vertical渐变起点的 x/y 坐标x2/y2string \| number见vertical渐变终点的 x/y 坐标fromOffsetstring \| number0%from颜色沿渐变轴放置的位置数值或百分比fromOpacitystring \| number1from颜色的不透明度toOffsetstring \| number100%to颜色沿渐变轴放置的位置toOpacitystring \| number1to颜色的不透明度rotatestring \| number—应用到渐变的旋转角度如rotate-45transformstring—直接透传的渐变变换优先级高于rotate源码中二者互斥使用rotate存在时优先childrenReactNode—自定义渐变子节点如自定义stop提供时覆盖默认的两个stopverticalbooleantrue未传任何 x/y 坐标时将渐变方向从水平改为垂直默认的vertical行为值得展开源码 LinearGradient.tsx 中当vertical为true且x1/x2/y1/y2均未提供时自动设置x10, x20, y10, y21即从上到下的垂直渐变。如果你想要水平的从左到右渐变传vertical{false}即可。默认生成的渐变由两个stop组成见 LinearGradient.tsxstop offset{fromOffset} stopColor{from} stopOpacity{fromOpacity} / stop offset{toOffset} stopColor{to} stopOpacity{toOpacity} /若需要三色及以上的多段渐变例如加入中间色可通过children传入自定义stop节点此时默认的两个stop会被整体替换。RadialGradient径向渐变对应实现见 RadialGradient.tsx。它渲染radialGradient元素props 类型为PickLinearGradientProps, id | from | to | fromOffset | fromOpacity | toOffset | toOpacity | rotate | transform | children并合并SVGPropsSVGRadialGradientElement即除 x/y 坐标与vertical外其余语义与 LinearGradient 完全一致。由于剩余 props 以 rest props 透传给radialGradient你还可以使用 SVG 原生的径向渐变属性例如控制渐变半径的r、圆心cx/cy等。demo 仓库中有实际用法visx-gradient/Example.tsx 使用了RadialGradient id{id} from#55bdd5 to#4f3681 r80% /来限定径向渐变的影响范围。综合实战在图表中批量应用渐变Readme 只给了一个最小面积图示例这里结合仓库内 visx-gradient 沙盒示例 给出一个更完整的、可复制的实战模式——在单个 SVG 中批量声明多个渐变并分别填充到柱子上import React from react; import { Bar } from visx/shape; import { GradientPinkBlue, GradientTealBlue, LinearGradient, RadialGradient, } from visx/gradient; const Gradients [ GradientPinkBlue, ({ id }) RadialGradient id{id} from#55bdd5 to#4f3681 r80% /, ({ id }) LinearGradient id{id} from#351CAB to#621A61 rotate-45 /, GradientTealBlue, ]; export default function Example({ width, height }) { const numColumns width 600 ? 4 : 2; const columnWidth Math.max(width / numColumns, 0); const rowHeight Math.max(height / (Gradients.length / numColumns), 0); return ( svg width{width} height{height} {Gradients.map((Gradient, index) { const columnIndex index % numColumns; const rowIndex Math.floor(index / numColumns); const id demo-gradient-${index}; return ( React.Fragment key{id} {/* 像 SVG defs / 一样渐变以 id 形式被声明 */} Gradient id{id} / {/* 随后通过样式属性引用 */} Bar fill{url(#${id})} x{columnIndex * columnWidth} y{rowIndex * rowHeight} width{columnWidth} height{rowHeight} stroke#ffffff strokeWidth{8} rx{14} / /React.Fragment ); })} /svg ); }这个示例展示了几个贯穿始终的最佳实践声明与引用分离所有Gradient统一放在 SVG 前部声明图形通过fill{url(#${id})}引用id 动态生成批量场景下用索引拼接id如demo-gradient-0避免 id 冲突预设与自定义混用预设组件GradientPinkBlue、GradientTealBlue与自定义LinearGradient/RadialGradient可以在同一个数组里统一渲染因为它们都只接受{ id }并渲染defs内容rotate 调整方向rotate-45可生成斜向渐变让视觉更生动。同样的模式适用于 Readme 示例中的面积图把GradientPinkBlue idgradient /换成任意预设或LinearGradient/RadialGradient并把AreaClosed的fill指向对应id即可。小结围绕 packages/visx-gradient/Readme.md本文覆盖了visx/gradient的全部核心内容安装npm install --save visx/gradientReact 18/19 兼容核心心智模型渐变是 SVGdefs中的“定义”通过id被fill/stroke引用而非直接渲染的可见元素10 个预设渐变内部均基于LinearGradient的薄封装可覆盖默认色两个自定义组件LinearGradient支持方向、偏移、透明度、旋转、vertical与自定义stop与RadialGradient额外支持r/cx/cy等 SVG 原生属性。无论你是给面积图加一层渐变底色还是为柱状图批量定制多套配色visx/gradient都提供了“声明式、可复用、类型安全”的解决方案。相关源码与测试分别位于 packages/visx-gradient/src 与 packages/visx-gradient/test更完整的可运行示例可参考 packages/visx-demo/src/sandboxes/visx-gradient/Example.tsx。【免费下载链接】visx visx | visualization components项目地址: https://gitcode.com/gh_mirrors/vi/visx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
visx/gradient 渐变组件完全指南从预设渐变色到自定义 linear/radial 渐变【免费下载链接】visx visx | visualization components项目地址: https://gitcode.com/gh_mirrors/vi/visxvisx/gradient 是 visx 可视化组件库中专用于 SVG 渐变的 React 封装模块。本文以 packages/visx-gradient/Readme.md 为核心结合仓库源码与测试系统讲解预设渐变组件如 GradientPinkBlue、LinearGradient/RadialGradient 两个自定义基础组件以及“渐变是被定义defined而非渲染rendered”这一关键心智模型。读完本文你将能够在 visx 图表中正确声明、引用和定制任意线性/径向渐变并为柱状图、面积图等填充渐变背景。安装npm install --save visx/gradient模块的 peerDependencies 为react与types/react^18.0.0 || ^19.0.0其中types/react为可选对应 package 声明见 packages/visx-gradient/package.json。它属于纯渲染型组件sideEffects为false可按需 tree-shaking。如果你使用 yarn 或 pnpm等价命令为yarn add visx/gradient或pnpm add visx/gradient。快速上手用预设渐变填充一个面积图Readme 给出了一段最小可用示例用预设的GradientPinkBlue为AreaClosed提供渐变填充import { AreaClosed } from visx/shape; import { GradientPinkBlue } from visx/gradient; const GradientArea () { return ( svg GradientPinkBlue idgradient / AreaClosed fillurl(#gradient) / /svg ); };这个示例包含三个关键动作在svg内部通常是所有图形元素之前放置GradientPinkBlue idgradient /声明一个渐变“变量”给渐变赋予一个唯一的idReadme 强调id应在整个页面元素中唯一在目标图形上通过fillurl(#gradient)引用该 id。需要特别说明id的作用域defs内的渐变 id 实际上是文档级共享的因此如果页面存在多个 SVG务必保证id全局唯一否则可能出现渐变被意外覆盖的问题。这也是visx/gradient各组件把id设为必填 prop 的原因。关键心智模型The Definition Caveat“定义”而非“渲染”Readme 用了一个专门的章节来解释渐变的工作方式这一节是整个模块理解上的核心原文观点如下Like patterns, gradients are defined. When you renderGradientPinkBlue /, its rendering alinearGradient/element inside adefin the SVG. Its often better to think of these as variable definitions rather than true DOM elements. When you usefillurl(#gradient)youre referencing the gradients id:gradient.翻译并展开为工程实践要点渐变是“被定义”的渲染GradientPinkBlue /并不会直接产生可见图形而是在 SVG 的defs中生成一个linearGradient/定义节点把它当作变量声明而非 DOM 元素渐变本身不可见只有被fillurl(#id)或strokeurl(#id)引用时才产生视觉效果引用方式fillurl(#gradient)中的#gradient正是GradientPinkBlue idgradient /声明的 id。这一实现可以直接在源码中验证LinearGradient.tsx 与 RadialGradient.tsx 的返回值都包裹在defs中defs linearGradient id{id} ... {/* stop 节点 */} /linearGradient /defs测试用例也印证了这种用法如 LinearGradient.test.tsx 所示测试在svg内直接渲染LinearGradient idlinear /并断言不抛错而不是断言其渲染出可见的图形元素。十个开箱即用的预设渐变从 src/index.ts 可以看到visx/gradient共导出 10 个预设渐变组件外加LinearGradient、RadialGradient与对应的 Props 类型组件默认from起始色默认to结束色源码GradientDarkgreenGreen深绿绿GradientDarkgreenGreen.tsxGradientLightgreenGreen浅绿绿GradientLightgreenGreen.tsxGradientOrangeRed橙红GradientOrangeRed.tsxGradientPinkBlue#F02FC2#6094EAGradientPinkBlue.tsxGradientPinkRed粉红GradientPinkRed.tsxGradientPurpleOrange#7117EA#EA6060GradientPurpleOrange.tsxGradientPurpleRed紫红GradientPurpleRed.tsxGradientPurpleTeal紫青GradientPurpleTeal.tsxGradientSteelPurple钢蓝紫GradientSteelPurple.tsxGradientTealBlue#17EAD9#6078EAGradientTealBlue.tsx每个预设组件本质都是对LinearGradient的一层薄封装只预填from/to两个默认色其余所有 props 原样透传。以 GradientPinkBlue.tsx 为例export default function GradientPinkBlue({ from #F02FC2, to #6094EA, ...restProps }: LinearGradientProps) { return LinearGradient from{from} to{to} {...restProps} /; }因此预设组件的“预设”只是默认值你随时可以通过 props 覆盖颜色、方向、透明度等全部细节详见下文参数表。Gradients.test.tsx 为全部 10 个预设组件逐一编写了“可渲染不崩溃”的测试用例保证它们都能在svg中正常声明。自定义渐变LinearGradient 与 RadialGradientReadme 的 “Make your own!” 章节给出了两种自定义方式import { LinearGradient, RadialGradient } from visx/gradient; LinearGradient from#a18cd1 to#fbc2eb /; RadialGradient from#a18cd1 to#fbc2eb /;LinearGradient线性渐变对应实现见 LinearGradient.tsx。它渲染linearGradient元素完整 props 说明如下未特别标注的均有默认值Prop类型默认值说明idstring必填渐变的唯一 id应在整个页面唯一fromstring—起始颜色对应第一个stoptostring—结束颜色对应第二个stopx1/y1string \| number见vertical渐变起点的 x/y 坐标x2/y2string \| number见vertical渐变终点的 x/y 坐标fromOffsetstring \| number0%from颜色沿渐变轴放置的位置数值或百分比fromOpacitystring \| number1from颜色的不透明度toOffsetstring \| number100%to颜色沿渐变轴放置的位置toOpacitystring \| number1to颜色的不透明度rotatestring \| number—应用到渐变的旋转角度如rotate-45transformstring—直接透传的渐变变换优先级高于rotate源码中二者互斥使用rotate存在时优先childrenReactNode—自定义渐变子节点如自定义stop提供时覆盖默认的两个stopverticalbooleantrue未传任何 x/y 坐标时将渐变方向从水平改为垂直默认的vertical行为值得展开源码 LinearGradient.tsx 中当vertical为true且x1/x2/y1/y2均未提供时自动设置x10, x20, y10, y21即从上到下的垂直渐变。如果你想要水平的从左到右渐变传vertical{false}即可。默认生成的渐变由两个stop组成见 LinearGradient.tsxstop offset{fromOffset} stopColor{from} stopOpacity{fromOpacity} / stop offset{toOffset} stopColor{to} stopOpacity{toOpacity} /若需要三色及以上的多段渐变例如加入中间色可通过children传入自定义stop节点此时默认的两个stop会被整体替换。RadialGradient径向渐变对应实现见 RadialGradient.tsx。它渲染radialGradient元素props 类型为PickLinearGradientProps, id | from | to | fromOffset | fromOpacity | toOffset | toOpacity | rotate | transform | children并合并SVGPropsSVGRadialGradientElement即除 x/y 坐标与vertical外其余语义与 LinearGradient 完全一致。由于剩余 props 以 rest props 透传给radialGradient你还可以使用 SVG 原生的径向渐变属性例如控制渐变半径的r、圆心cx/cy等。demo 仓库中有实际用法visx-gradient/Example.tsx 使用了RadialGradient id{id} from#55bdd5 to#4f3681 r80% /来限定径向渐变的影响范围。综合实战在图表中批量应用渐变Readme 只给了一个最小面积图示例这里结合仓库内 visx-gradient 沙盒示例 给出一个更完整的、可复制的实战模式——在单个 SVG 中批量声明多个渐变并分别填充到柱子上import React from react; import { Bar } from visx/shape; import { GradientPinkBlue, GradientTealBlue, LinearGradient, RadialGradient, } from visx/gradient; const Gradients [ GradientPinkBlue, ({ id }) RadialGradient id{id} from#55bdd5 to#4f3681 r80% /, ({ id }) LinearGradient id{id} from#351CAB to#621A61 rotate-45 /, GradientTealBlue, ]; export default function Example({ width, height }) { const numColumns width 600 ? 4 : 2; const columnWidth Math.max(width / numColumns, 0); const rowHeight Math.max(height / (Gradients.length / numColumns), 0); return ( svg width{width} height{height} {Gradients.map((Gradient, index) { const columnIndex index % numColumns; const rowIndex Math.floor(index / numColumns); const id demo-gradient-${index}; return ( React.Fragment key{id} {/* 像 SVG defs / 一样渐变以 id 形式被声明 */} Gradient id{id} / {/* 随后通过样式属性引用 */} Bar fill{url(#${id})} x{columnIndex * columnWidth} y{rowIndex * rowHeight} width{columnWidth} height{rowHeight} stroke#ffffff strokeWidth{8} rx{14} / /React.Fragment ); })} /svg ); }这个示例展示了几个贯穿始终的最佳实践声明与引用分离所有Gradient统一放在 SVG 前部声明图形通过fill{url(#${id})}引用id 动态生成批量场景下用索引拼接id如demo-gradient-0避免 id 冲突预设与自定义混用预设组件GradientPinkBlue、GradientTealBlue与自定义LinearGradient/RadialGradient可以在同一个数组里统一渲染因为它们都只接受{ id }并渲染defs内容rotate 调整方向rotate-45可生成斜向渐变让视觉更生动。同样的模式适用于 Readme 示例中的面积图把GradientPinkBlue idgradient /换成任意预设或LinearGradient/RadialGradient并把AreaClosed的fill指向对应id即可。小结围绕 packages/visx-gradient/Readme.md本文覆盖了visx/gradient的全部核心内容安装npm install --save visx/gradientReact 18/19 兼容核心心智模型渐变是 SVGdefs中的“定义”通过id被fill/stroke引用而非直接渲染的可见元素10 个预设渐变内部均基于LinearGradient的薄封装可覆盖默认色两个自定义组件LinearGradient支持方向、偏移、透明度、旋转、vertical与自定义stop与RadialGradient额外支持r/cx/cy等 SVG 原生属性。无论你是给面积图加一层渐变底色还是为柱状图批量定制多套配色visx/gradient都提供了“声明式、可复用、类型安全”的解决方案。相关源码与测试分别位于 packages/visx-gradient/src 与 packages/visx-gradient/test更完整的可运行示例可参考 packages/visx-demo/src/sandboxes/visx-gradient/Example.tsx。【免费下载链接】visx visx | visualization components项目地址: https://gitcode.com/gh_mirrors/vi/visx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
