Google chrome 铬+；ExtJS SVG图像渲染问题

我使用的是ExtJS（4.1.1）绘图组件，有几个堆叠的精灵（图像样式）。在Chrome（版本34.0.1847.131）中，最上面的图像元素无法正确渲染

很难解释到底什么是错误的，尽管看起来这些图像是以随机和不正确的方式被裁剪/剪裁的

我还没有在所有已知的浏览器中进行详尽的测试，但可以报告我的最新版本Safari、Firefox和IE11正确地呈现了SVG

虽然我在ExtJS中这样做，但我不一定有任何理由相信这是一个ExtJS特有的问题，但我也不能肯定地排除它

我在这里简要介绍了这个问题：

只需单击Sprout图标，并注意弹出式图标在Chrome中可能无法正确呈现

注意：fiddle代码与大型应用程序中的代码并不完全相同，但fiddle以类似的方式显示了问题

这里的基本概念是一系列重叠的图像精灵，在Chrome中不起作用。铬虫？概念问题？建议

以下是Ext从fiddle脚本生成的SVG（如果有帮助）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="288" height="266" id="ext-gen1037" style="width: 288px; height: 266px;">
    <defs></defs>
    <rect width="100%" height="100%" fill="#000" stroke="none" opacity="0" id="ext-gen1038"></rect>
    <rect id="ext-sprite-1019" zIndex="10" width="288" height="266" fill="#385" ry="0" rx="0" x="0" y="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <rect id="ext-sprite-1020" zIndex="20" width="180" height="180" r="15" x="10" y="10" fill="#864" stroke="#364" stroke-width="15" ry="15" rx="15" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <image id="ext-sprite-1021" xlink:href="http://fieldsoffuel.org/game/resources/field_overlay.png" zIndex="50" src="http://fieldsoffuel.org/game/resources/field_overlay.png" x="10" y="10" opacity="1" width="180" height="180" preserveAspectRatio="none" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
    <image id="ext-sprite-1022" xlink:href="http://fieldsoffuel.org/game/resources/planting_icon.png" zIndex="100" src="http://fieldsoffuel.org/game/resources/planting_icon.png" x="20" y="160" opacity="0.75" width="50" height="50" preserveAspectRatio="none" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
    <image id="ext-sprite-1026" xlink:href="http://209.85.48.18/7059/133/0/p1015675/shadow.png" class="" zIndex="200" src="http://209.85.48.18/7059/133/0/p1015675/shadow.png" x="-20" y="125" opacity="1" height="130" width="130" hidden="false" preserveAspectRatio="none" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
    <image id="ext-sprite-1023" xlink:href="http://fieldsoffuel.org/game/resources/grass_icon.png" class="" zIndex="3000" src="http://fieldsoffuel.org/game/resources/grass_icon.png" x="-5" y="135" width="50" height="50" opacity="0.75" hidden="false" preserveAspectRatio="none" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
    <image id="ext-sprite-1024" xlink:href="http://fieldsoffuel.org/game/resources/corn_icon.png" class="" zIndex="3000" src="http://fieldsoffuel.org/game/resources/corn_icon.png" x="45" y="135" width="50" height="50" opacity="0.75" hidden="false" preserveAspectRatio="none" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
    <image id="ext-sprite-1025" xlink:href="http://fieldsoffuel.org/game/resources/cover_crop_icon.png" class="" zIndex="3000" src="http://fieldsoffuel.org/game/resources/cover_crop_icon.png" x="20" y="185" width="50" height="50" opacity="0.75" hidden="false" preserveAspectRatio="none" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">  </image>
</svg>

---

这可能是，它是否适用于使用Chrome 35的用户？FWIW它在Chrome36（dev）中运行良好。事实上，它在v35beta中确实可以运行。不确定我是否想等待测试版，等等。关于这在概念上是否是实现所示目标的合适方式，有何评论？如果我们不想等待测试版，我想知道这是否可以在没有SVG的情况下完成。不过，我不确定这是个好主意。