使用合理的文件名保存 SVG 中包含的 BMP

Question

我有一个 SVG 文件，它在 svg:image 中包含一个 BMP 作为数据 URI。问题是某些浏览器不支持 svg:a link 的 download="download.bmp" 属性。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" 
    onload="dd();" baseProfile="full" version="1.1" height="409.6" width="1036.8">
  <script type="text/ecmascript">
function dd() {
fetch(document.getElementById('thebmp').getAttribute('xlink:href')).
  then(res =&gt; res.blob()).then(res =&gt; window.URL.createObjectURL(res)).
    then(function(x) 
    { document.getElementById('theanchor').setAttribute('href', x);});
}
  </script>
  <g transform="scale(0.2)">
    <a href="#" download="download.bmp" id="theanchor">
      <image id="thebmp" height="2048" width="2592" y="0" x="163" 
        xlink:href="data:image/x-ms-bmp;base64,...."/>
    </a>
    <g transform="translate(163,0)">
      <g id="P_1_1">
        <path d="M 130 102 l 2332 0 l 0 1844 l -2332 0 l 0 -1844" style="fill:none; 
         stroke:#66ff66; stroke-width:6px; stroke-opacity:0.75;"/>
        <text y="379" x="107" font-size="75px" fill="#66ff66" text-anchor="end">[0]</text>
      </g>
    </g>
    <g transform="translate(3110,122)">
      <g transform="scale(122)">
        <text fill="#66ff66" y="0" x="0" font-size="0.9px">blah</text>
      </g>
    </g>
  </g>
</svg>

您可以在 https://www.magentacloud.de/share/6x.svy3pz9 中找到 testsvgf.svg 的完整版本。

我希望用户能够将BMP图像保存为BMP文件（svg:img xlink:href的原始内容，最好向用户提出一个合理的文件名。

如所写，代码仅适用于 firefox（测试 60 和 68），提示使用默认名称 download.bmp.

进行保存

其他浏览器的行为不同...

Chrome proposes/saves 一些不带扩展名的神秘文件名（版本 80）

Edge：点击时不执行任何操作。当从上下文菜单中选择 Save link as 时，下载的文件名将从 (1).txt 开始增加（我可以接受上下文菜单）

保存文件的内容在所有三个浏览器中都是完全正确的。只是来自 Chrome 和 Edge，您不认识您保存的内容。

添加例如document.getElementById('theanchor').setAttribute('download', 'another.bmp*); 在 document.getElementById('theanchor').setAttribute('href', x); 之后没有帮助

我做错了什么？ - 提前致谢！

Answer 1

你没有做错任何事！

download 属性在 Scalable Vector Graphics (SVG) 2 draft 中得到正式支持。不幸的是，这是一份草稿。与许多其他 Web 技术一样，官方规范的更新速度并不总是足够快（SVG 1.1 于 2011 年发布），许多浏览器都热衷于尽早采用规范。

这正是 caniuse.com exists. Incidentally, it shows that the svg:a element's download attribute is currently only supported by Firefox 的原因。

您可以为尚不支持它的浏览器提出功能请求，或者等待几个周年，直到它在所有地方都得到支持。

仅供参考 download 属性是 added in June 2016

感谢您展示一个奇怪的示例，说明您可以使用 SVG 做什么！

Answer 2

您可以使用 foreignObject 和 HTML 锚元素，它们在 Chrome 中支持下载属性。

我们将点击事件从 SVG 锚点转发到 HTML 锚点，下载实际发生的是 HTML 锚点。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" 
    onload="dd();" baseProfile="full" version="1.1" height="409.6" width="1036.8">
  <script type="text/ecmascript">
function dd() {
fetch(document.getElementById('thebmp').getAttribute('xlink:href')).
  then(res =&gt; res.blob()).then(res =&gt; window.URL.createObjectURL(res)).
    then(function(x) 
    { document.getElementById('theanchor').setAttribute('href', x);});
}
  </script>
  <g transform="scale(0.2)">
    <a href="#" onclick="document.getElementById('theanchor').click()" download="download.bmp">
      <image id="thebmp" height="2048" width="2592" y="0" x="163" 
        xlink:href="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>
    </a>
    <foreignObject width="0" height="0">
        <a xmlns="http://www.w3.org/1999/xhtml" download="download.bmp" id="theanchor"/>
    </foreignObject>
    <g transform="translate(163,0)">
      <g id="P_1_1">
        <path d="M 130 102 l 2332 0 l 0 1844 l -2332 0 l 0 -1844" style="fill:none; 
         stroke:#66ff66; stroke-width:6px; stroke-opacity:0.75;"/>
        <text y="379" x="107" font-size="75px" fill="#66ff66" text-anchor="end">[0]</text>
      </g>
    </g>
    <g transform="translate(3110,122)">
      <g transform="scale(122)">
        <text fill="#66ff66" y="0" x="0" font-size="0.9px">blah</text>
      </g>
    </g>
  </g>
</svg>

使用合理的文件名保存 SVG 中包含的 BMP

Save BMP contained in SVG with reasonable filename

javascript

svg

cross-browser