SVG线性梯度显示在一条路径上，而不是另一条路径上

Question

除了d属性中的结尾数之外，我有两条路径非常相似。第一条路径显示正确，但第二条路径不显示。奇怪的是，如果我将第二条路径的笔画改变为我定义的梯度以外的任何东西，它就会出现。如果我从最后一个数字中截断小数，梯度也会出现。为什么第二个没有渐变出现的原因呢？

不管它的价值是什么，我正试图让这个在谷歌铬上工作。

<svg height="0" width="0">
  <defs>
    <linearGradient id="pageSearchGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#a0c3d2" stop-opacity="0.75"></stop><stop offset="40%" stop-color="#F59B23" stop-opacity="0.85"></stop><stop offset="100%" stop-color="#F59B23" stop-opacity="1"></stop>
  </defs>
</svg>

<svg width="1600" height="500" class="sankey-diagram "><g width="1450" height="500" transform="translate(150, 0)"><g class="sankey-links">

    <!--  Only their decimal points differ for the last number and yet this one is the one that shows up -->
    <path d="M12,436.7529384197002C365.5,436.7529384197002,365.5,436.75293841969994,719,436.38406598523085" class="sankey-link " style="stroke: url(&quot;#pageSearchGradient&quot;); opacity: 0.3; stroke-width: 126.494;"></path>

    <path d="M12,436.7529384197002C365.5,436.7529384197002,365.5,436.75293841969994,719,436.75293841969994" class="sankey-link " style="stroke: url(&quot;#pageSearchGradient&quot;); opacity: 0.3; stroke-width: 126.494;"></path>

</svg>

链接到https://codepen.io/anon/pen/OvEzNJ?editors=1000#0

Answer 1

不同之处在于这两条路径的边框高度：

> document.querySelector('path:nth-child(1)').getBBox().height
> 0.368865966796875
> document.querySelector('path:nth-child(2)').getBBox().height
> 0

在梯度向量中使用百分比单位，而不是指定gradientUnits

<linearGradient id="pageSearchGradient" x1="0%" y1="0%" x2="100%" y2="0%">

关于这些条件，等级库有以下几点意见：

如果是gradientUnits="objectBoundingBox"，，则使用应用梯度的元素的边界框建立属性x1、y1、x2和y2的用户坐标系，然后应用属性gradientTransform指定的转换。百分比表示相对于对象的边框的值。 当gradientUnits="objectBoundingBox"和gradientTransform是恒等矩阵时，线性梯度的法线垂直于物体包围盒空间中的梯度向量(即(0,0)位于对象包围盒的上/左，(1,1)在对象包围盒的底部/右边的抽象坐标系)。

如果边框没有高度，则顶部(在边界框空间中定义0)和底部(定义1)是相同的值。浏览器(我在Firefox中也可以看到)似乎对“抽象坐标系统”感到困惑，不再知道如何计算梯度向量及其法线。

我会管那叫窃听器。我能想到的最好的解决方法是使用gradientUnits="userSpaceOnUse"，或者确保您的路径边框始终具有非零的宽度和高度。(阈值似乎在第七位重要数字附近。)

下面是一个显示效果的测试用例。应该有三个矩形，第一个用<rect>绘制，另两个用<line stroke-width=...>绘制。对于中线，y1和y2是相同的，而最底层的是不同的。

​

<svg width="200" height="150">
  <linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop stop-color="yellow" offset="0" />
    <stop stop-color="green" offset="1" />
  </linearGradient>
  <rect x="5" y="0" width="200" height="40" style="fill:url(#lg)" />
  <line x1="0" y1="75" x2="200" y2="75" style="stroke-width:40;stroke:url(#lg)" />
  <line x1="0" y1="125" x2="200" y2="126" style="stroke-width:40;stroke:url(#lg)" />
</svg>

​