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

SVG with embedded script to scale to browsers available space

本文关键字：扩展到 浏览器 空间 可扩展 SVG 脚本      更新时间：2023-09-26

我正在尝试创建一个完全独立的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浏览器中运行得很好，但在其他浏览器中完全失败。有人能指导我了解问题是什么以及我如何解决它吗？

您知道SVG文档可以自动扩展到其父容器而不需要任何脚本吗？

您只需要指定一个viewBox属性。

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

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

相关文章：