Question

我试图用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" />

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

Answer 1

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

抓住了

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

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

Answer 2

罗伯特·朗森给出了一个很好的解释。但有时候

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

会很痛苦，因为它会将插值扩展到整个画布上，而不仅仅是线条。

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

例如，

CSVReader reader = new CSVReader(new FileReader(file.getAbsolutePath()));

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

Answer 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)' />

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

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

3 个答案: