小编Kri*_*dor的帖子

SVG 线性渐变显示在一条路径上,而不显示在另一条路径上

除了 d 属性中的结尾数字外,我有两条非常相似的路径。第一个路径显示正确,但第二个路径不显示。奇怪的是,如果我将第二条路径的笔划更改为我定义的渐变以外的任何东西,它就会出现。如果我从最后一个数字中截断小数,也会出现渐变。有什么原因为什么第二个没有出现渐变?

为了它的价值,我试图让它在谷歌浏览器上工作。

<svg height="0" width="0">
  <defs>
    <linearGradient id="pageSearchGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#a0c3d2" stop-opacity="0.75"></stop><stop offset="40%" stop-color="#F59B23" stop-opacity="0.85"></stop><stop offset="100%" stop-color="#F59B23" stop-opacity="1"></stop>
  </defs>
</svg>

<svg width="1600" height="500" class="sankey-diagram "><g width="1450" height="500" transform="translate(150, 0)"><g class="sankey-links">

    <!--  Only their decimal points differ for the last number and yet this one is the one that shows up -->
    <path d="M12,436.7529384197002C365.5,436.7529384197002,365.5,436.75293841969994,719,436.38406598523085" class="sankey-link " style="stroke: url(&quot;#pageSearchGradient&quot;); opacity: 0.3; stroke-width: 126.494;"></path>

    <path d="M12,436.7529384197002C365.5,436.7529384197002,365.5,436.75293841969994,719,436.75293841969994" class="sankey-link " style="stroke: url(&quot;#pageSearchGradient&quot;); opacity: 0.3; stroke-width: 126.494;"></path>

</svg>
Run Code Online (Sandbox Code Playgroud)

链接到 https://codepen.io/anon/pen/OvEzNJ?editors=1000#0

html css svg google-chrome web

0
推荐指数
1
解决办法
1723
查看次数

标签 统计

css ×1

google-chrome ×1

html ×1

svg ×1

web ×1