不显示 LinearGradient 类型的 SVG 填充

Question

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

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

<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生成。

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

Answer 1

根据SVG规范

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

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

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

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

这意味着

fill: url(#rating_40_grad2)

变成

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

因为这就是基本标签的作用。但 LinearGradient 位于页面本身中，位于http://kisters-dev.crealistiques.de/datatable/

没有匹配意味着没有梯度。