不显示 linearGradient 类型的 SVG 填充

Question

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

我实际上发现 jquery 数据 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 生成。

可以找到重现 "error" 的测试站点设置 here。 SVG 元素是 table 列 "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/

没有匹配就没有渐变。

Answer 2

正如罗伯特所说：

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

Answer 3

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

不显示 linearGradient 类型的 SVG 填充

SVG fill of type linearGradient is not displayed

css

jquery

svg

datatables