带有渐变笔划的 SVG 线不会直接显示答案

【问题标题】：SVG Line with Gradient Stroke Won't Display Straight带有渐变笔划的 SVG 线不会直接显示
【发布时间】：2014-03-05 11:31:10
【问题描述】：

我正在尝试使用 SVG 复制 <hr>。现在，用 SVG 画一条直线效果很好，但是第二次我用渐变描边它就不再显示为直线了。

以下代码有效，但请注意，y1 和 y2 必须相隔 1 个单位。例如，如果我将 y1 和 y2 设置为 210，这条线就会消失。

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
        <stop offset="50%" style="stop-color:rgba(0,0,0,0.75);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
    </linearGradient>
</defs>
<line x1="40" y1="210" x2="460" y2="211" stroke="url(#grad1)" stroke-width="1" />

我可能只是缺少一些明显的线性渐变功能，而且线条看起来还不错，但我宁愿让它笔直。谢谢。

【问题讨论】：

标签： svg line gradient

【解决方案1】：

你被最后一段in this part of the SVG specification抓住了

当适用元素的几何形状没有宽度或没有高度时，不应使用关键字 objectBoundingBox，例如水平或垂直线的情况，即使该线在查看时由于具有非零值而具有实际粗细笔划宽度，因为边界框计算忽略笔划宽度。当适用元素的几何图形没有宽度或高度并且指定了 objectBoundingBox 时，将忽略给定的效果（例如，渐变或过滤器）。

objectBoundingBox 是 gradientUnits 的默认值，因此您需要使用 gradientUnits="userSpaceOnUse" 然后调整值以适合不同的坐标系。

【讨论】：

谢谢你，这很完美！我将 gradientUnits="userSpaceOnUse" 添加到渐变元素并更改 y2 值以匹配 y1 值。成功！

【解决方案2】：

Robert Longson 给出了很好的解释。但有时userSpaceOnUse 会很痛苦，因为它将插值分布在整个画布上，而不仅仅是线条。

相反，您可以在值中添加少量，以确保 bbox 大小不为零。

例如，

  <line x1="40" y1="210" x2="460" y2="210.001" stroke="url(#grad1)" stroke-width="1" />

将绘制一条带有渐变的直线。

【讨论】：

如果我有一个<path> 直路径怎么办？我能做点什么吗？在我的情况下，我在屏幕上有很多路径，userSpaceOnUse 只是删除了这些路径上应用的渐变
EDIT 没关系，我在linearGradient 中添加了x1 和x2，现在可以正常工作了（参见observablehq.com/@d3/sankey-diagram）
我曾经采用公认的答案方法，直到今天。一旦我意识到参考系统的深层含义，我就转向了这个。正如@MTZ 所说，我也有一条路径，我只是在我的 y 坐标上添加了一个很小的值，因此 myObject.y = myObject.y + 0.0001 并且它起作用了！

【解决方案3】：

假设您根本不想要任何不准确，您可以将线更改为填充路径，如下所示

<path d='M 40 209.5 L 460 209.5 L 460 210.5 L 40 210.5' fill='url(#grad1)' />

或者替换为填充矩形，如下所示

<rect x=40 y=209.5 width=420 height=1 fill='url(#grad1)' />

值得注意的是，这个问题只影响垂直和水平线。斜线显示正确。

【讨论】：