最近、Chrome で SVG 線形グラデーションをレンダリングする際に問題が発生しています。以下の SVG を見てください。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<svg>
<g>
<linearGradient id="linearGradient" gradientUnits="userSpaceOnUse" x1="79px" x2="706px" y1="0" y2="0">
<stop class="" offset="54.54545454545455%" style="stop-color: red;"></stop>
<stop class="" offset="63.63636363636364%" style="stop-color: red;"></stop>
<stop class="" offset="63.63636363636364%" style="stop-color: green;"></stop>
<stop class="" offset="72.72727272727273%" style="stop-color: green;"></stop>
</linearGradient>
<path d="M79,241L136,196L193,194L250,212L307,159L364,152L421,339L478,46L535,205L592,134L649,215L706,74"
style="opacity: 1; fill: none; stroke: url(#linearGradient); stroke-width: 2px;">
</path>
</g>
</svg>
</body>
</html>
この html を Chrome にロードした後 (私のバージョンは 23.0.1271.64 です)、ピークで線形グラデーションの 2px のエラーを明確に確認するのは非常に簡単です。これは、左側の線分に緑色を示しています。IE 9 と最新の Firefox の両方で、svg は正しくレンダリングされます。おそらくChromeかWebKitのバグだと思います。回避策を知っている人はいますか？ありがとう！