jquery - 不显示 linearGradient 类型的 SVG 填充

Question

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

我实际上发现，将 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 .

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

Answer 1

根据SVG specification

Each gradient offset value is required to be equal to or greater than the previous gradient stop's offset value. If a given gradient stop's offset value is not equal to or greater than all previous offset values, then the offset value is adjusted to be equal to the largest of all previous offset values.

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

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

<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/

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