我可以使用法线/钟形混合在 SVG 中定义线性渐变吗?
考虑以下 svg 片段:
<linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>
是否有一种方法可以指定应使用钟形曲线将颜色混合在一起? (类似于 GDI+ LinearGradientBrush::SetBlendBellShape 方法)
下面的两个矩形显示了差异 - 左侧没有贝尔混合,右侧有贝尔混合:
或者由 SVG 渲染器决定如何颜色应该混合在一起吗?
Consider the following svg snippet:
<linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>
Is there a way of specifying that the colours should be blended together using a bell shaped curve?
(Similar to the GDI+ LinearGradientBrush::SetBlendBellShape method)
The two rectangles below show the difference - left is without bell blend, right is with bell blend:
Or is it left to the SVG renderer to decide how the colors should be blended together?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(2)
欢烬2024-09-21 01:27:14
您可以将 gradientTransform
应用于线性渐变。我不确定可用变换如何映射到您所需的效果。
如果这不起作用,您可以使用渐变作为过滤器的输入 也许最终会产生类似的效果。这是一篇介绍组合过滤器的文章。
~没有更多了~
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
gradientTransform 不能做这种变换。您将需要一个
过滤器将钟形变换应用于红/白渐变。
。
左边是原来的,右边是改造过的。该曲线的粒度不是很细(只有 15 个值),因此您可能希望对大梯度使用更多项。
gradientTransform cannot do this kind of transformation. You will need a
filter to apply a bell shaped transform to a red/white gradient.
.
Original on the left, transformed on the right. The curve isn't very fine grained (only 15 values), so you would probably want to use more terms for a large gradient.