相关疑难解决方法(0)

我正在使用svg绘制折线图,​​并要求应用渐变.对于每一行,我使用一个path元素并将笔划设置为我的一个lineargradient元素.

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

我做了一个小提示,显示了这个问题: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的微小变化)没有出现.

我尝试了一点点破解让它继续下去 - …