Chrome 不会在 SVG 中缓存图像

我刚刚发现，如果放置在 SVG 中的图像的cache-control标头设置为 no-cache，Chrome 不会缓存放置在 SVG 中的图像。Firefox和IE10似乎忽略了此设置。

我创建了一个带有静态SVG的小测试页面：

.HTML：

<div style="width: 500px; text-align: center;">
    <input id="move-left-btn" type="button" value="&lt;&lt;">
    <input id="move-right-btn" type="button" value="&gt;&gt;">
</div>
<div class="svgwrapper" style="width: 500px; height: 250px; background-color: lightgrey;">
    <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="250">
        <g id="svggroup" class="transition-on" transform="matrix(0.2,0,0,0.2,80,35)">
            <image width="1672" height="887" opacity="1" xlink:href="https://dl.dropboxusercontent.com/sh/q7htlj5h8qqfhjf/SVDuynM7R3/car.png"></image>
        </g>
    </svg>
</div>

Javascript：

$(document).ready(function() {
    var curXPos = 80;
    // Local test function which represent some server calls in my "real life" scenario
    // Just updates the x-position in the transform matrix in this test case
    function updateSvgText(svgText, posXDelta) {
        curXPos += posXDelta;
        if (curXPos < 0) {
            curXPos = 160;
        } else if (curXPos > 160) {
            curXPos = 0;
        }
        return svgText.replace(/matrix'(.*')/, 'matrix(0.2,0,0,0.2,' + curXPos + ',35)');
    }
    // Fetch the new SVG (in real life from server) and rerender it
    function moveSvg(posXDelta) {
        var svg = $('#svg'),
            svgText = updateSvgText($('.svgwrapper').html(), posXDelta);
        svg.empty();
        svg.append($(svgText).children());
    }
    $('#move-left-btn').click($.proxy(moveSvg, this, -20));
    $('#move-right-btn').click($.proxy(moveSvg, this, 20));
});

将

• 源图像的标题设置为 no-cache cache-control的工作示例（每次按下"移动"按钮后在 chrome 中闪烁）：
  http://jsfiddle.net/zF6NF/4/

• 具有不同源图像的相同示例cache-control标头设置为 max-age=315360000,public（无闪烁）：
  http://jsfiddle.net/zF6NF/5/

单击按钮时重新加载图像（图像"闪烁"并在开发工具的网络选项卡中可见），而Firefox在两个示例中都流畅地重新渲染SVG，而无需任何重新加载。

一些附加信息：

1. 这只是一个例子。在我的"现实生活场景"中，我从服务器收到一个新的 SVG（而不是 updateSvgText 方法调用），这意味着我不能通过更改转换矩阵属性的值来执行 SVG 的部分更新，而是必须每次重新渲染整个 SVG（至少现在......

2. 我无法控制图像的来源，这意味着两件事：

   • 我无法更改cache-control标题
   我无法创建 Base64 编码的数据 uri
   • ，将它们保存在本地，然后在渲染之前用这些数据 uri 替换 SVG 中的图像（由于"相同资源来源"策略，无法创建 Base64 编码的数据 uri...

有什么办法可以...

• 在本地覆盖/否决cache-control标头，即使图像来自不受控制的远程位置？
从
• 从其他域加载的图像创建 Base64 编码的数据 uri 我对客户端没有任何控制权？
• 以某种方式告诉 Chrome 始终在我的 SVG 中缓存图像？

不用说，其他解决方案也非常受欢迎！

谢谢