Question

我正在尝试创建一个完全独立的SVG文档，当它在Web浏览器中加载时，会自动缩放并居中到可用空间。请注意，这是关于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应自动扩展到浏览器窗口。

具有嵌入式脚本的SVG可扩展到浏览器可用空间

1 个答案: