具有梯度笔划的SVG线不会直接显示

Question

我试图<hr>用SVG 复制一个.现在,使用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" />

我可能只是错过了线性渐变的一些明显功能,而且线条看起来还不错,但我更倾向于让它笔直.谢谢.

Answer 1

您将被SVG规范的这一部分的最后一段所困

当适用元素的几何体没有宽度或没有高度时,不应使用关键字objectBoundingBox,例如水平线或垂直线的情况,即使由于具有非零行程宽度而在查看时线具有实际厚度时也是如此边界框计算忽略笔划宽度.当适用元素的几何体没有宽度或高度且指定了objectBoundingBox时,将忽略给定的效果(例如,渐变或滤镜).

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

Answer 2

Robert Longson给出了一个很好的解释.但有时候会userSpaceOnUse很痛苦,因为它会将插值扩展到整个画布上,而不仅仅是线条上.

相反,您可以为值添加一个小量,以确保bbox大小不为零.

例如,

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

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