带有渐变笔划的 SVG 线不会直接显示

问题描述

我正在尝试使用 SVG 复制

---

.现在，用 SVG 画一条直线效果很好，但第二次我用渐变描边它不再显示在一条直线上.

I'm attempting to replicate an <hr> with SVG. Now, making a straight line with SVG works perfectly, but the second I stroke it with a gradient it will no longer display in a straight line.

以下代码有效，但请注意，y1 和 y2 必须相距 1 个单位.例如，如果我将 y1 和 y2 设置为 210，该行将消失.

The following code works, but take note, y1 and y2 must be 1 unit apart. If I set y1 and y2 to 210 for instance, the line will disappear.

<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" />

我可能只是遗漏了一些明显的线性渐变函数，线条看起来不错，但我宁愿让它笔直.谢谢.

I'm probably just missing some obvious function of linear gradients, and the line looks alright, but I'd much rather just have it straight. Thanks.

推荐答案

最后一段 在 SVG 规范的这一部分

当适用元素的几何形状没有宽度或没有高度时，不应使用关键字 objectBoundingBox，例如水平或垂直线的情况，即使该线由于具有非零而在查看时具有实际粗细笔画宽度，因为边界框计算会忽略笔画宽度.当适用元素的几何形状没有宽度或高度并且指定了 objectBoundingBox 时，将忽略给定的效果(例如，渐变或过滤器).

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

objectBoundingBox is the default for gradientUnits so you need to use gradientUnits="userSpaceOnUse" and then adjust the values to be appropriate for the different coordinate system.

这篇关于带有渐变笔划的 SVG 线不会直接显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！