5

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 バグ トラッカーで見つけることができませんでした。既知の回避策はありますか?

4

1 に答える 1

0

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/

于 2012-12-05T20:24:08.583 に答える