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

问题描述

我正在尝试使用SVG复制<hr>.现在，使用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.

推荐答案

最后一段

当适用元素的几何没有宽度或没有高度时(例如水平或垂直线的情况)，即使当该线由于具有非零值而具有实际的粗细时，也不应使用关键字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屋！