4

我最近看到 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>

在Chrome（我的版本是23.0.1271.64）中加载这个html后，很容易在peek中看到一个明显的2px线性渐变误差，左侧线段显示一些绿色。在 IE 9 和最新的 Firefox 中，svg 都可以正确呈现。我认为这可能是 Chrome 或 WebKit 的错误。有谁知道如何解决？谢谢！

4

0 回答 0