• 获取SVG中g标签的宽度高度及位置坐标


    1. 问题的出现

    对于普通的HTML元素,有很多获得其宽度width、高度height、距左left、距顶top等属性的方法:

    类似offsetWidth,clientWidth,width之类的,通过查看DOM元素的属性可以一探究竟:

     

     然而当遇到SVG的g标签的时候,却碰到问题了:
    明明在开发者工具中可以显示的宽高、位置坐标等属性,通过原有的offsetWidth,ClientWidth获得值却为undefined:
     

    这说明,普通的DOMElenment中的方法不适用与SVG,而SVGDocumentElement(SVG文档元素)中并没有相应的属性。 

    2. 解决方法

    有幸,谷爸度娘大法好(前提你要用英文搜索)
    有如下两个方法可以获得我们需要的东西,并且全部为JS原生方法:

    2.1 getBBox()

    首先我们用 SVGElement.getBBox() 的方法来试试看:

    <svg width="100%" height="100%" viewBox="0 0 150 360"
         preserveAspectRatio="xMidYMid meet"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <filter id="filter1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/>
            <feComposite in="Gau1" in2="Gau1" result="Com1" operator="in"/>
            <feComposite in="Com1" in2="Gau1"  operator="in"/>
        </filter>
        <g id="g1">
        <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)"></circle>
        <circle cx="50" cy="50" r="6" fill="RGB(110,239,10)"></circle>
        </g>
    </svg>

    用方法document.getElementById("g1").getBBox();得到如下对象
     
    2.2 getBoundingClientRect()

    SVG代码还是如上,用document.getElementById("g1").getBoundingClientRect();的方法,获得另一个对象:
     

    3. 疑点解释及总结

    通过比较发现两个方法得到的两组对象的数值并不一样,不难发现原因为:

    getBBox() 获得的为元素在当前SVG坐标中的数据,而 getBoundingClientRect 则是获取了了浏览器坐标中的数据(因为SVG标签中的ViewBox属性影响,实际渲染在浏览器中的大小及位置是经过偏移和缩放的)。

    两个方法的作用不仅局限在SVG元素中,童鞋们不妨试试在其他元素和特定环境中的奇妙运用。

  • 相关阅读:
    bootstrapValidator重新校验/全选回显
    mybatis遍历map参数查询
    location.href传json字符串
    springmvc异步处理
    intellIJ IDEA学习笔记3
    intellIJ IDEA学习笔记2
    intellIJ IDEA学习笔记
    maven国内镜像
    Docker版本Jenkins的使用
    Docker容器网络
  • 原文地址:https://www.cnblogs.com/smedas/p/12482724.html
Copyright © 2020-2023  润新知