带有渐变笔划的 SVG 线不会直接显示 [英] SVG Line with Gradient Stroke Won't Display Straight

问题描述

我正在尝试使用 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 时，将忽略给定的效果(例如，渐变或过滤器).

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

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 线不会直接显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！