Question

我希望有人可能会遇到svg线性渐变填充这种奇怪的行为，而不会显示。在标准浏览器中应用。中风的其他属性按预期工作，但不是填充！该元素似乎是透明的。

我实际上发现jquery Data Table可能存在副作用，它与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生成。

测试网站设置，可以重现＆＃34;错误＆＃34;可以找到here。 SVG元素是表格列中的那些小十字符号＆＃34; Bewertung＆＃34;。

Answer 1

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

不匹配意味着没有渐变。

Answer 2

像罗伯特说的那样：

＆＃13;

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

＆＃13;

不显示类型为linearGradient的SVG填充

2 个答案: