美文网首页
实现svg自适应

实现svg自适应

作者: 饼饼phoebe | 来源:发表于2021-04-19 10:39 被阅读0次
    1. 在 svg 根标签添加如下属性(从左上角开始等比缩放)
    <svg
      width="100%"
      height="100%"
      preserveAspectRatio="xMinYMin meet"
    >...</svg>
    
    1. 动态设置 svg 的 viewBox 属性(viewBox就是将svg尺寸设置为相对尺寸)
    const svg = document.getElementsByTagName('svg');
        for (let i = 0; i < svg.length; i++) {
          svg[i].setAttribute('viewBox', '0,0,' + svg[i].getBBox().width + ',' + svg[i].getBBox().height + '')
        }
    

    相关文章

      网友评论

          本文标题:实现svg自适应

          本文链接:https://www.haomeiwen.com/subject/znqilltx.html