带有嵌入式脚本的 SVG 可扩展到可用的浏览器 space

Question

我正在尝试创建一个完全独立的 SVG 文档，当加载到 Web 浏览器中时，它会自动缩放并居中到可用 space。请注意，这是 而不是 关于 html 文档中的 SVG。

这里是文档：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.2"
    width="600"
    height="400"
    docname="web-business-card.svg">

所以 SVG 文档的内部尺寸是 600x400，这是我的嵌入式脚本：

<script type="text/javascript">
  /* <![CDATA[ */
    var fitObject = function() {
      var svg  = document.documentElement;
      var zoom = Math.min((window.innerWidth/600),(window.innerHeight/400));
      var left = parseInt(((window.innerWidth-(600*zoom))/2)/zoom);
      var top  = parseInt(((window.innerHeight-(400*zoom))/2)/zoom);
      // set dynamic style attributes
      svg.style.zoom = zoom;
      svg.style.left = left+'px';
      svg.style.top  = top+'px';
    }
    document.addEventListener("DOMContentLoaded", fitObject);
    window.onresize = fitObject;
  /* ]]> */
</script>

这在我用于测试的 Chromium 浏览器中运行良好，但在其他浏览器中完全失败。谁能指导我了解问题所在以及如何解决？

Answer 1

您是否知道 SVG 文档可以自动缩放到其父容器而不需要任何脚本？

您只需指定一个 viewBox 属性。

因此，对于您的示例，设置 width="100%" 和 height="100%" 并添加 viewBox="0 0 640 400"。

现在，加载时，SVG 应该会自动缩放到浏览器 window。

带有嵌入式脚本的 SVG 可扩展到可用的浏览器 space

SVG with embedded script to scale to browsers available space

javascript

browser

svg

zooming

scale