我正在尝试为线条的笔划添加渐变，该线条在顶部淡出，但没有运气。实际上，我的工作原理是这样的，但即使在 Chrome 中，某些 SVG 尺寸也会出现浏览器问题，其中渐变会中断并且是固定的：
<linearGradient
id='whiteFadeGrad'
x1={svgHeight}
y1='0'
x2='0'
y2={svgHeight}
gradient-units='userSpaceOnUse'
>
<stop offset='0' stop-color='rgba(255,255,255,0)' />
<stop offset='1' stop-color='rgba(255,255,255,0.2)' />
</linearGradient>
我宁愿坚持使用百分比单位，但无法让它工作：
<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
Thanks
它看起来像一个错误和一个黑客，但有效：
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120.001" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
你可能会使用<rect>代替<line>，这并不那么hacky：
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<rect x="120" y="0" width="4" height="200" style="fill: url('#fadeGrad'); shape-rendering: crispEdges;" />
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
