Demo

Question

我正在使用svg绘制折线图，并且需要应用渐变。对于每一行，我使用一个路径元素并将笔划设置为我的一个线性渐变元素。

除了纯粹的水平线外，这对所有东西都很有用 - 在这种情况下，我的线上根本没有颜色。

我做了一个小提示，显示了问题：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的微小变化）会出现。

我尝试了一点点破解让它继续下去 - 在开始时放置假的M-1，-1，这似乎解决了IE和Chrome中的问题，但不是firefox。这让我觉得我在理解SVG渐变和路径时遗漏了一些东西。有没有办法让这个工作？

Answer 1

gradientUnits的默认值是objectBoundingBox。您所遇到的关键问题在specification text ...

的最后一段中有所描述

当适用元素的几何图形没有宽度或没有高度时，不应使用关键字objectBoundingBox，例如水平线或垂直线的情况，即使由于具有非零值而在查看时线条具有实际厚度时也是如此因为边界框计算忽略了笔划宽度，所以笔划宽度。当适用元素的几何体没有宽度或高度且指定了objectBoundingBox时，将忽略给定的效果（例如，渐变或滤镜）。

如果你有一条水平线，为什么不使用带填充的矩形而不是带有笔划的路径？或者使用userSpaceOnUse单位。

Answer 2

gradientUnits =“userSpaceOnUse”可以修复它。

Demo

<linearGradient 
    id="grad" x1="0%" x2="100%" y1="0%" y2="0%" 
    gradientUnits="userSpaceOnUse">
    <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>

SVG梯度为完美的水平路径

2 个答案:

Demo

More detail answer