gradient 相关问题

我可以在 SVG 中使用带有 defs-section 的线性渐变，例如：我可以在 SVG 中使用带有 defs-section 的线性渐变，例如： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 我可以使用没有 defs-section 的线性渐变吗？我发现这样的东西： <rect style="fill:lineargradient(foo)"> <defs> 仅用于结构化目的，其中的元素不会显示，但由于渐变仅在应用于形状或其他元素时才可见，因此您可以在文档的任何位置定义它。但是你仍然必须坚持正确的语法： <rect style="fill:url(#myLinearGradient1)" ... /> 如果对这是否有效有疑问，这里是问题中的确切代码，作为可执行堆栈片段： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 这是完全相同的代码，没有 <defs>/<\defs>: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 上述两个可执行代码片段都显示了预期的结果（至少在 chrome 和 firefox 中），这是一个填充有渐变的 100x100 矩形（绿色阴影垂直变化）：是的，你确实可以拥有渐变而不需要 defs 元素；您只需将渐变元素放在代码中的其他位置即可，例如这样： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg>

svg gradient linear-gradients

回答 2 投票 0

如何在delphi中绘制TDBGrid单元格的渐变颜色背景

我的目标是绘制一个Delphi TDBgrid单元格，使其具有从右到左的渐变颜色，如下图所示：我使用了 Vcl.GraphUtil 单元中的 GradientFillCanvas 过程。这是我的习惯

delphi drawing gradient dbgrid

回答 1 投票 0

是否可以创建一个具有两种颜色之间渐变的geom_segment，但开始/结束颜色根据变量而变化？

我正在构建一个具有离散 Y 轴的图，并进行多个成对比较。然而，我没有使用文本作为标签，而是创建了一个辅助图，其中的颜色点指示...

r ggplot2 colors gradient geom-segment

回答 1 投票 0

如何将CSS渐变颜色应用到类似于所附屏幕截图中的组件背景

我们如何使用伪CSS选择器在背景的一侧应用CSS渐变，如下图所示。在此输入图像描述我尝试使用线性渐变 css 但它不是......