Path 完美水平路径的SVG梯度

我正在使用svg绘制折线图，并要求对其应用渐变。对于每一行，我使用一个path元素并将笔划设置为一个lineargradient元素

除了纯水平线，这一切都很好用——在这种情况下，我的线条上根本没有颜色

我做了一把小提琴来说明问题：

​

纯水平线（第一条路径）不会出现，而第二条（y方向略有变化）会出现

我尝试了一些小技巧来让它运行起来——在一开始就放了一个假的M-1，-1，这似乎在IE和Chrome中解决了这个问题，但在firefox中没有。这让我觉得我在理解SVG梯度和路径时遗漏了一些东西。有没有办法让它工作？

的默认设置是objectBoundingBox。你的关键问题在…的最后一段描述

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

如果有一条水平线，为什么不使用带填充的矩形而不是带笔划的路径呢？或者使用userSpaceOnUse单位。

gradientUnits=“userSpaceOnUse”可以修复它

---

图表是自动生成的，所以它是否是完美的水平面取决于数据。不过userSpaceOnUse单元工作得很好，谢谢@如果路径是从数据动态生成的，那么一个选项可能是稍微抖动路径，使其不完全水平。这样可以保留objectBoundingBox，这可能更适合您，因为停止的百分比属于路径本身

<svg>
    <defs>
        <linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%">
            <stop class="" offset="0%" style="stop-color: red;"></stop>
            <stop class="" offset="33%" style="stop-color: yellow;"></stop>
            <stop class="" offset="66%" style="stop-color: pink;"></stop>
            <stop class="" offset="100%" style="stop-color: blue"></stop>
        </linearGradient>
    </defs>
<-- Gradient not applied -->
<path stroke="url(#grad)" d="M20,20L400,20" style="stroke-width: 10px;"></path>

<-- Gradient applied since height of 1px -->
<path stroke="url(#grad)" d="M20,40L400,41" style="stroke-width: 10px;"></path>

<-- Gradient applied because of fake initial "move to" -->
<path stroke="url(#grad)" d="M-1,-1,M20,60L400,60" style="stroke-width: 10px;"></path>
</svg>​

<linearGradient 
    id="grad" x1="0%" x2="100%" y1="0%" y2="0%" 
    gradientUnits="userSpaceOnUse">
    <stop class="" offset="0%" style="stop-color: red;"></stop>
    <stop class="" offset="33%" style="stop-color: yellow;"></stop>
    <stop class="" offset="66%" style="stop-color: pink;"></stop>
    <stop class="" offset="100%" style="stop-color: blue"></stop>
</linearGradient>