首页 > web前端 > css教程 > 为什么我的 SVG 在 Internet Explorer 中无法正确缩放?

为什么我的 SVG 在 Internet Explorer 中无法正确缩放?

DDD
发布: 2024-12-31 20:30:15
原创
1013 人浏览过

Why Are My SVGs Not Scaling Correctly in Internet Explorer?

由于缺少宽度和高度,SVG 无法在 IE 中正确缩放

在此问题中,用户遇到了 SVG 在 IE 中的缩放问题互联网浏览器。该错误源于 SVG 中缺少明确的宽度和高度属性。

解决方案:提供宽度和高度属性

为了解决该问题,用户使用了尼古拉斯·加拉格尔 (Nicolas Gallagher) 发现的技术,其中涉及使用隐藏的“画布”。元素为 SVG 提供必要的宽高比。

实现:

  1. 添加一个 元素添加到 HTML,其宽度和高度属性设置为匹配 SVG 的大小。
  2. 隐藏 通过将其可见性设置为隐藏来使用 CSS。
  3. 将 SVG 绝对放置在 <div> 内使用 CSS。

    CSS:

    canvas {
        display: block;
        width: 100%;
        visibility: hidden;
    }
    
    svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    登录后复制

    HTML:

    <div>
    登录后复制

    通过实施此解决方法,用户成功解决了 Internet Explorer 中的缩放问题,使 SVG 能够正确显示。

以上是为什么我的 SVG 在 Internet Explorer 中无法正确缩放?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板