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

arkascha

我正在尝试创建一个完全独立的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应该会自动缩放到浏览器窗口。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我们如何在浏览器中缓存嵌入式SVG?

SVG嵌入式图像仅在浏览器中显示

将画布扩展到整个浏览器窗口

CSS div扩展到整个浏览器宽度

跨浏览器嵌入式视频灰度滤镜

如何从嵌入式pdf与浏览器进行通信

嵌入式浏览器中对Google的OAuth请求

JSF创建嵌套的嵌入式浏览器

没有浏览器的嵌入式设备上的 MS Graph API 身份验证

浏览器扩展:在浏览器操作弹出窗口和后台脚本之间发送消息(带有响应)

Chrome扩展程序:拒绝执行嵌入式脚本,但是没有嵌入式脚本吗?

如何设置Silverlight浏览器应用程序与嵌入式Web浏览器控件之间的通信

如何设置 OutlineButton 宽度 > 子宽度和边框扩展到所有可用空间?

如何将main div扩展到整个浏览器窗口高度?

CSS宽度100%限于浏览器窗口(它不会扩展到右侧滚动区域)

如何建立从浏览器扩展到 qt 的实时通信

如何使固定的导航栏扩展到浏览器的宽度?

在Excel Javascript API中创建嵌入式Web浏览器或iframe

启动嵌入式 Tomcat 并从命令行打开浏览器

如何在Google Chrome浏览器的嵌入式Javascript中设置断点?

在嵌入式Vue应用中操纵浏览器网址

无法在iPhone上的Facebook嵌入式浏览器中加载CSS

浏览器何时在嵌入式元素中呈现空格?

为什么嵌入式YouTube视频在Google Chrome浏览器中停止运行?

如何为Chromium嵌入式浏览器的不同实例设置不同的Cookie

哪个嵌入式浏览器显示广告网站?

使用Javascript,HTML5,AngularJS从浏览器打印嵌入式PDF

嵌入式 IE 浏览器:如何在导航完成前检测重定向?

在浏览器中以猫鼬显示嵌入式文档数据模型