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

问题描述

我正在使用svg绘制折线图，​​并且需要对其应用渐变.对于每一行，我使用path元素并将笔划设置为我的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屋！