完美水平路径的 SVG 渐变 [英] SVG gradient for perfectly horizontal path

问题描述

我正在使用 svg 绘制折线图，​​并需要对其应用渐变.对于每一行，我使用一个路径元素并将笔触设置为我的一个 lineargradient 元素.

I'm using svg to draw line charts, and require a gradient to be applied to it. For each line, I use a path element and set the stroke to one of my lineargradient elements.

这适用于除纯水平线以外的所有内容 - 在这种情况下，我的线上根本没有颜色.

This works great for everything but purely horizontal lines - in this case, I get no colours on my line at all.

我制作了一个显示问题的小提琴:http://jsfiddle.net/b6EQT/

I've made a fiddle showing the problem: http://jsfiddle.net/b6EQT/

<svg>
    <defs>
        <linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%">
            <stop class="" offset="0%" style="stop-color: red;"></stop>
            <stop class="" offset="33%" style="stop-color: yellow;"></stop>
            <stop class="" offset="66%" style="stop-color: pink;"></stop>
            <stop class="" offset="100%" style="stop-color: blue"></stop>
        </linearGradient>
    </defs>
<-- Gradient not applied -->
<path stroke="url(#grad)" d="M20,20L400,20" style="stroke-width: 10px;"></path>

<-- Gradient applied since height of 1px -->
<path stroke="url(#grad)" d="M20,40L400,41" style="stroke-width: 10px;"></path>

<-- Gradient applied because of fake initial "move to" -->
<path stroke="url(#grad)" d="M-1,-1,M20,60L400,60" style="stroke-width: 10px;"></path>
</svg>​

纯水平线(第一条路径)没有出现，第二条(y 略有变化)会出现.

The pure horizontal line (first path) doesn't appear, and the second one (slight change in y) does.

我尝试了一些小技巧来让它运行 - 在开始时放置一个假的 M-1,-1，这似乎可以解决 IE 和 Chrome 中的问题，但不能解决 firefox 的问题.这让我觉得我在理解 SVG 渐变和路径时遗漏了一些东西.有没有办法让它起作用?

I tried a little hack to get it going - putting a fake M-1,-1 at the start, which seems to work around the issue in IE and Chrome, but not firefox. This makes me think I'm missing something in my understanding of SVG gradients and paths. Is there a way to get this to work?

推荐答案

gradientUnits 是 objectBoundingBox.规范文本的最后一段描述了您遇到的关键问题...

The default for gradientUnits is objectBoundingBox. The key issue you have is described in the last paragraph of the specification text...

当适用元素的几何形状没有宽度或没有高度时，不应使用关键字 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.

如果您有一条水平线，为什么不使用带有填充的矩形而不是带有笔划的路径?或者也可以使用 userSpaceOnUse 单位.

Why not use a rect with a fill rather than a path with a stroke if you've got a horizontal line? Or alternatively use userSpaceOnUse units.

这篇关于完美水平路径的 SVG 渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！