在Chrome中复杂的SVG形状上显示具有多个停靠点的线性渐变时出错

Question

我在Chrome 23中显示填充了水平线性渐变的复杂形状时遇到问题，而在Firefox上则显示正确。

这是来源：

  <svg width="5000" height="1146">
    <defs>
      <linearGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">
        <stop offset="0%" stop-color="#000000"></stop>
        <stop offset="4.3478260869565215%" stop-color="#ffffff"></stop>
        <stop offset="8.695652173913043%" stop-color="#000000"></stop>
        <stop offset="13.043478260869565%" stop-color="#ffffff"></stop>
        <stop offset="17.391304347826086%" stop-color="#000000"></stop>
        <stop offset="21.73913043478261%" stop-color="#ffffff"></stop>
        <stop offset="26.08695652173913%" stop-color="#000000"></stop>
        <stop offset="30.434782608695652%" stop-color="#ffffff"></stop>
        <stop offset="34.78260869565217%" stop-color="#000000"></stop>
        <stop offset="39.130434782608695%" stop-color="#ffffff"></stop>
        <stop offset="43.47826086956522%" stop-color="#000000"></stop>
        <stop offset="47.82608695652174%" stop-color="#ffffff"></stop>
        <stop offset="52.17391304347826%" stop-color="#000000"></stop>
        <stop offset="56.52173913043478%" stop-color="#ffffff"></stop>
        <stop offset="60.869565217391305%" stop-color="#000000"></stop>
        <stop offset="65.21739130434783%" stop-color="#ffffff"></stop>
        <stop offset="69.56521739130434%" stop-color="#000000"></stop>
        <stop offset="73.91304347826087%" stop-color="#ffffff"></stop>
        <stop offset="78.26086956521739%" stop-color="#000000"></stop>
        <stop offset="82.6086956521739%" stop-color="#ffffff"></stop>
        <stop offset="86.95652173913044%" stop-color="#000000"></stop>
        <stop offset="91.30434782608695%" stop-color="#ffffff"></stop>
        <stop offset="95.65217391304348%" stop-color="#000000"></stop>
        <stop offset="100%" stop-color="#ffffff"></stop>
      </linearGradient>
    </defs>
    <g>
      <path style="fill:url(#gradient0);" d="M0,779.6285756579973Q188.40579710144928,841.081456685821,217.3913043478261,843.314835189802C260.8695652173913,846.6649029457736,391.304347826087,814.2594898547115,434.7826086956522,813.1292532177131S608.695652173913,834.5442766841929,652.1739130434783,832.0124688198168S826.0869565217391,794.6248826891217,869.5652173913044,787.8111745739515S1043.4782608695652,766.5393037818999,1086.9565217391305,763.8753876681141S1260.8695652173913,760.8732388688913,1304.3478260869565,761.1720134360927S1478.2608695652173,763.9854486465747,1521.7391304347825,766.8631333401279S1695.6521739130435,785.1411786313408,1739.1304347826087,789.9488603716242S1913.0434782608695,813.3719811720902,1956.5217391304348,814.939950742961S2130.434782608696,802.822363864396,2173.913043478261,805.6285560803321S2347.826086956522,836.4433774429324,2391.304347826087,843.0018729023216S2565.217391304348,858.1981456728363,2608.695652173913,871.2135106742245S2782.608695652174,967.6199962598103,2826.086956521739,973.1555229162032S3000,928.3947882612744,3043.478260869565,926.5687772381535S3217.3913043478265,963.2067254481539,3260.8695652173915,954.8954126849945S3434.7826086956525,850.6427255665794,3478.2608695652175,843.45564960656S3652.1739130434785,881.8886509252865,3695.6521739130435,883.0246530848S3869.5652173913045,836.9424921296683,3913.0434782608695,854.8156712016948S4086.956521739131,1040.6944601645232,4130.434782608696,1061.7564438050654S4304.347826086957,1064.350749527541,4347.826086956522,1065.4355076071165S4521.739130434783,1084.6840223283762,4565.217391304348,1072.6040246008204S4739.130434782609,961.6724654492547,4782.608695652174,944.6355303315577Q4811.594202898551,933.2775735864263,5000,902.2346734238499L5000,929.5546407071457Q4811.594202898551,986.8066995590544,4782.608695652174,999.2363901785781C4739.130434782609,1017.8809261078635,4608.695652173913,1104.7567082129335,4565.217391304348,1116S4391.304347826087,1111.9003103524788,4347.826086956522,1111.6693080492425S4173.913043478261,1132.556931553748,4130.434782608696,1113.6899769676372S3956.5217391304345,940.1843652548877,3913.0434782608695,922.9997621881347S3739.1304347826085,942.0801934799161,3695.6521739130435,941.8439463001079S3521.7391304347825,914.4187396145448,3478.2608695652175,920.6372903900522S3304.3478260869565,998.0838620912253,3260.8695652173915,1004.0294540551805S3086.95652173913,978.0745583843735,3043.478260869565,980.093210029604S2869.565217391304,1029.959108719383,2826.086956521739,1024.2159705074864S2652.173913043478,936.1148674257628,2608.695652173913,922.661827910638S2434.782608695652,896.1180594356094,2391.304347826087,889.6855753562377S2217.391304347826,861.9257157322984,2173.913043478261,858.3369871169205S2000,856.8202625360321,1956.5217391304348,853.7982892024586S1782.608695652174,833.51842660998,1739.1304347826087,828.1172537811854S1565.2173913043478,804.2133989045794,1521.7391304347825,799.7865609145126S1347.8260869565217,785.5464804078146,1304.3478260869565,783.8488738805177S1130.4347826086957,780.0144097711119,1086.9565217391305,782.8104956415439S913.0434782608696,804.0107985673161,869.5652173913044,811.8097325848375S695.6521739130435,855.7782129005594,652.1739130434783,860.7998358167584S478.2608695652174,859.0301242287742,434.7826086956522,862.0259617468273S260.8695652173913,894.7552100004517,217.3913043478261,890.75821099729Q188.40579710144928,888.0935449951822,0,822.0559717152104Z"></path>
    </g>
  </svg>

这是图像 ， 这里是生成html + svg （您可能需要在结果窗口中向下滚动一点）

顺便说一句，如果您将Chrome页面缩放缩小到75％或更低，渲染会变得更好，但仍然不是很正确。

我做错了什么或者这是一个已知的Chrome错误？ 我无法在Chromium bug追踪器中找到它。 任何已知的解决方法？

Answer 1

要解决Chrome的错误，您可以应用spreadMethod="reflect" ...

    <defs>
      <linearGradient id="gradient0" x1="0" y1="0%" x2="4.3478260869565215%" y2="0%" spreadMethod="reflect">
        <stop offset="0" stop-color="#000000"></stop>
        <stop offset="1" stop-color="#ffffff"></stop>
      </linearGradient>
    </defs> 

http://jsfiddle.net/aCzej/