我正在使用ExtJS（4.1.1）DrawComponent并有几个堆叠的Sprite（图像样式）。在Chrome（版本34.0.1847.131）中，最顶层的图像元素无法正确呈现。
很难解释究竟出了什么问题，尽管图像似乎是以随机和不正确的方式裁剪/裁剪的。
我没有在每个已知的浏览器中进行详尽的测试，但可以报告我的最新版本的Safari，Firefox和IE11正确呈现SVG。
虽然我在ExtJS中这样做，但我没有理由相信它是ExtJS特定的问题，但我也不能肯定地排除它。
我把这个问题的快速JSFiddle放在一起，在这里：http://jsfiddle.net/jdischler/D42de/6/
只需点击Sprout图标，并注意弹出图标可能无法在Chrome中正确呈现。
注意：小提琴代码与较大的应用程序中的内容完全相同，但小提琴以类似的方式展示问题。
这里的基本概念是一系列重叠的图像精灵，它在Chrome中不起作用。 Chrome bug？概念问题？建议？
如果有帮助，这是Ext从小提琴脚本生成的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>