Chrome和Firefox
按照我想要的方式显示SVG.它均匀地缩放,保持正确的长宽比和其父母的宽度百分比.
Internet Explorer保持正确的宽高比,但不能与其父级正确缩放.
Safari的父母宽度尺寸正确,但不高.相对于父容器的高度以某种方式设置为100%.
使用Javascript
var menu = Raphael('menu','100%','100%'); menu.setViewBox('0','0','50',true); var menu_bg = menu.rect(0,50,50); menu_bg.attr({ id : 'menu_bg','stroke-width' : '0','fill' : '#000' });
CSS
* { margin: 0; padding: 0; -moz-Box-sizing: border-Box; Box-sizing: border-Box; } html,body { height: 100%; } #menu { width: 50%; background: #60F; padding: 2.5%; } #menu svg { display: block; width: 100%; height: 100%; max-height: 100%; } #text { width: 50%; background: #309; padding: 2.5%; color: #FFF; }
HTML
<div id="menu"></div> <div id="text"> Filler text </div>
实例可以查看
解决方法
从文章中我读到…
To preserve the aspect ratio of the containing element and ensure that
is scales uniformly,we include the viewBox and preserveAspectRatio
attributes.The value of the viewBox attribute is a list of four space- or
comma-separated numbers: min-x,min-y,width and height. By defining
the width and height of our viewBox,we define the aspect ratio of the
SVG image. The values we set for the preserveAspectRatio attribute —
300 × 329 — preserve the aspect ratio defined in viewBox.
原文地址:https://www.jb51.cc/js/151876.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。