除了 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("#pageSearchGradient"); 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("#pageSearchGradient"); opacity: 0.3; stroke-width: 126.494;"></path>
</svg>
不同之处在于两条路径的边界框的高度:
> 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句