不显示线性渐变类型的 SVG 填充答案

【问题标题】：SVG fill of type linearGradient is not displayed不显示线性渐变类型的 SVG 填充
【发布时间】：2015-11-10 02:28:49
【问题描述】：

我希望那里的人可能会遇到这种奇怪的 svg 线性渐变填充行为，它没有显示。完全适用于标准浏览器。作为描边的其他属性按预期工作，但不是填充！该元素似乎是透明的。

我实际上发现与 SVG 元素放置在同一页面上的 jquery 数据表可能会有副作用。

<svg viewBox="0 12.705 512 486.59" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="20" width="20" style="margin-right: 0px;">
    <defs>
        <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="jRate_grad1">        
            <stop stop-color="white" offset="0%"/>
            <stop stop-color="yellow" offset="100%"/>
        </linearGradient>
   </defs>
   <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " style="fill: url(#jRate_grad1);stroke:black;fill-opacity:1;stroke-width:2px;"/>
</svg>

svg 代码由 jquery 评分插件jRate 生成。

可以在here 找到重现“错误”的测试站点设置。 SVG 元素是表格列“Bewertung”中的那些小十字符号。

【问题讨论】：

交换两个停止元素

标签： jquery css svg datatables

【解决方案1】：

您的页面上可能有多个具有相同 id 的渐变。让它独一无二，它就会起作用。

【讨论】：

【解决方案2】：

根据SVG specification

每个梯度偏移值都必须等于或大于前一个梯度停靠点的偏移值。如果给定梯度停止的偏移值不等于或大于所有先前的偏移值，则将偏移值调整为等于所有先前的偏移值中的最大值。

您的偏移值减少而不是增加，因此您不会看到渐变。

您网站中的另一个问题（但不是您的问题）是您使用的是基本标签。

<base href="http://kisters-dev.crealistiques.de/">

这意味着

fill: url(#rating_40_grad2)

变成

fill: url(http://kisters-dev.crealistiques.de/#rating_40_grad2)

因为that's what base tags do。但是linearGradient位于页面本身中，位于http://kisters-dev.crealistiques.de/datatable/

没有匹配意味着没有渐变。

【讨论】：

原来停止颜色定义的顺序没有区别，仍然没有显示填充！正如我最初的问题中提到的那样，一定有一些副作用，因为相同的代码在另一个环境/另一个页面上工作。
cars10 上面的答案肯定适用于我的浏览器。如果还有其他问题不在问题范围内，那么很难为您提供帮助。
谢谢罗伯特，你说得对！我现在在上面添加了一个测试站点的链接。
可以在here找到一个显示 SVG 元素不工作的测试站点。
@Steven 另一个问题是您使用的基本标签，正如我现在在上面解释的那样。

【解决方案3】：

就像罗伯特说的：

<svg viewBox="0 12.705 512 486.59" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="200" width="200" style="margin-right: 0px;">
    <defs>
        <linearGradient id="grad1">        
            <stop stop-color="yellow" offset="0%"/>
            <stop stop-color="white" offset="100%"/>
        </linearGradient>
   </defs>
   <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566" style="fill: url(#grad1);stroke:black;fill-opacity:1;stroke-width:9px;"/>
</svg>

【讨论】：