首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么offsetWidth返回undefined作为svg的宽度?

offsetWidth是一个用于获取元素宽度的属性,但是在SVG元素中,offsetWidth返回undefined是因为SVG元素没有offsetWidth属性。

SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,用于描述二维图形和图形应用程序。与HTML元素不同,SVG元素没有内置的布局属性,因此没有offsetWidth属性。

在SVG中,可以使用其他属性来获取元素的宽度,例如getBoundingClientRect()方法可以返回一个DOMRect对象,其中包含元素的位置和尺寸信息。可以通过DOMRect对象的width属性来获取SVG元素的宽度。

另外,可以使用SVG的width属性来指定SVG元素的宽度。例如,可以在SVG元素的开头添加一个类似于<svg width="500" height="300">的属性来设置SVG的宽度为500个单位。

总结起来,offsetWidth返回undefined作为SVG的宽度是因为SVG元素没有offsetWidth属性,可以使用其他方法或属性来获取SVG元素的宽度,如getBoundingClientRect()方法或SVG的width属性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

21道前端面试题,值得收藏~

1、scrollWidth,clientWidth,offsetWidth区别 scrollWidth:对象实际内容宽度,不包边线宽度,会随对象中内容超过可视区后而变大。...clientWidth:对象内容可视区宽度,不包滚动条等边线,会随对象显示大小变化而改变。offsetWidth:对象整体实际宽度,包滚动条等边线,会随对象显示大小变化而改变。...content-box 宽度和高度分别应用到元素内容框。...在宽度和高度之外绘制元素内边距和边框 border-box 为元素指定任何内边距和边框都将在已设定宽度和高度内进行绘制 inherit 规定应从父元素继承 box-sizing 属性值 14、Javascript...表示一个空指针对象,所以用typeof检测会返回”object”。 16、target、currentTarget区别?

58241
  • 基于JavaScript开源可视化图标库

    也支持直接使用canvas元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方,例如在 WebGL 中作为贴图,这跟使用 getDataURL 生成图片链接相比可以支持图表实时刷新...如果传入值为null/undefined/'auto',则表示自动取 dom(实例容器)宽度。 height 可显式指定实例高度,单位为像素。...对于 registerMap 所注册 SVG ,暂并不支持从此方法中返回。 如果你在项目中使用了按需引入,从 v5.3.0 开始getMap必须要在引入地图组件后才能使用。...measureText 测量文本宽度,默认会通过createCanvas得到 Canvas 元素提供接口来测量文本宽度,也可以替换成更轻量实现。...x: number, y: number, width: number, height: number } 注意:如果矩形完全被截干净,会返回 undefined

    2K10

    50道常见js面试题

    分享50道js面试题 1.javascripttypeof返回哪些数据类型 string, boolean, number, undefined, function, object 2.例举3种强制类型转换和...2、调用函数时,应该提供参数没有提供,该参数等于undefined。 3、对象没有赋值属性,该属性值为undefined。 4、函数没有返回值时,默认返回undefined。...典型用法是: 1、作为函数参数,表示该函数参数不是对象。 2、作为对象原型链终点。 27.new操作符具体干了什么呢?...Javascript解析引擎在读取一个Object属性值时,会沿着2(原型链)向上寻找,如果最终没有找到,则该属性值为undefined;如果最终找到该属性值,则返回结果。...(元素内包含内容) outerHTML(自己以及元素内内容) 48.offsetWidthoffsetHeight和clientWidth clientHeight区别 (1)offsetWidth

    3.5K10

    动手练一练,手写一个价格对比、固定表头滚动表格

    pageXOffset 设置或返回当前页面相对于窗口显示区左上角 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角 Y 位置。...3.1、该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height; 3.2、这里top、left和css中理解很相似,width、height...获取表格 offsetWidth 宽度 获取表格距离视口顶部距离(getBoundingClientRect().top) 获取表头 offsetHeight 高度 基于这些我们定义相关变量,...获取相关值: let tableWidth = table.offsetWidth; let tableOffsetTop = table.getBoundingClientRect().top; let...如果滚动到表格区域,获取重置后表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部高度是否大于表头高度。

    3.2K31

    React技巧之使用ref获取元素宽度

    在useLayoutEffect钩子中,更新宽度state变量。 使用offsetWidth属性获取元素宽度。...Width: {width} Height: {height} ); } useRef()钩子可以传递一个初始化作为参数...该钩子返回一个可变ref对象,其.current属性被初始化为传递参数。 请注意,我们必须访问ref对象current属性,以获得对我们设置ref属性div元素访问。...offsetWidth属性以像素为单位返回元素宽度,包括任何边框、内填充和垂直滚动条(如果存在的话)。 offsetHeight属性返回元素高度,单位是像素,包括垂直内填充和边框。...或者,你可以使用clientWidth属性,它返回元素宽度,单位是像素,包括内填充,但不包括边框、外边距和垂直滚动条(如果存在的话)。

    3.9K10

    【实例】调整区域大小&动态隐藏区域

    let width = leftDom.offsetWidth // 当前点击位置 + 滚动条 // offsetL .left元素距离浏览器左侧边缘距离...例如, HTMLElement 接口是所有HTML元素基础接口, 而 SVGElement 接口是所有SVG元素基本接口....Element属性 说明 实例值 clientHeight、clientWidth (只读)该元素它内部宽度宽度 300(border-box) clientTop、clientLeft (只读)该元素距离它左边界宽度...HTMLElement属性 说明 实例值 offsetHeight、offsetWidth (只读,整数)该元素自身可视高度、宽度加上上下border宽度 300 offsetLeft、offsetTop...该元素左上角相对于 HTMLElement.offsetParent 节点左边界、顶部偏移像素值 180+3=183 - offsetParent: 返回一个指向最近(closest,指包含层级上最近

    1.7K21

    html5简单拖拽实现自动左右贴边+幸运大转盘

    //常用 21 22 某个元素宽度:obj.offsetWidth //常用 23 某个元素高度:obj.offsetHeight //常用 24 25 某个元素上边界到body最顶部距离...:obj.offsetTop(在元素包含元素不含滚动条情况下) 26 某个元素左边界到body最左边距离:obj.offsetLeft(在元素包含元素不含滚动条情况下) 27 返回当前元素上边界到它包含元素上边界偏移量...:obj.offsetTop(在元素包含元素含滚动条情况下) 28 返回当前元素左边界到它包含元素左边界偏移量:obj.offsetLeft(在元素包含元素含滚动条情况下) js获取Html...元素实际宽度高度: 1、#div1.style.width 2、#div1.offsetWidth    宽高都写在样式表里,就比如#div1{width:120px;}。...这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度;宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度

    4.2K50

    你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?

    offsetWidth //返回元素宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //...返回元素宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素高度(包括元素高度、内边距,不包括边框和外边距)style.width //返回元素宽度(包括元素宽度...,不包括内边距、边框和外边距)style.height //返回元素高度(包括元素高度,不包括内边距、边框和外边距)scrollWidth //返回元素宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距...返回是字符串,如28px,offsetWidth返回是数值28;style.width/style.height与scrollWidth/scrollHeight是可读写属性,clientWidth.../clientHeight与offsetWidth/offsetHeight是只读属性style.width值需要事先定义,否则取到值为空。

    95340

    jquery 与javascript 获取元素尺寸大小对比

    jquery获取尺寸方法 width() 方法设置或返回元素宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素高度(不包括内边距、边框或外边距)。...innerWidth() 方法返回元素宽度(包括内边距)。 innerHeight() 方法返回元素高度(包括内边距)。 outerWidth() 方法返回元素宽度(包括内边距和边框)。...offsetWidth 是对象可见宽度,包滚动条等边线,会随窗口显示大小改变。 Window 尺寸 有三种方法能够确定浏览器窗口尺寸(浏览器视口,不包括工具栏和滚动条)。...offsetWidth属性可以返回对象padding+border+width属性值之和,style.width返回值就是定义width属性值。...2.offsetWidth属性仅是可读属性,而style.width是可读写。 3.offsetWidth属性返回值是整数,而style.width返回值是字符串,并且带有单位。

    1.8K30

    【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

    深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始,一步步涉及一些常见前端笔试和面试点 主要参考自第一篇文章,然而笔者在读时候未觉详尽...即由外向里是 margin, border, padding, content 2.为什么会有两种不同盒模型(标准模式和怪异模式) 在了解两种不同盒模型之前,需要先了解一下为什么会产生两种不同盒模型...console.log('Dom.currentStyle.width:' + dom.currentStyle.width); //Cannot read property 'width' of undefined...); //160 5.dom.offsetWidth/offsetHeight 对象所在元素实际宽度 console.log('Dom.offsetWidth: ' + dom.offsetWidth...); //160 具体情况如图所示 其中,盒模型为标准模型,元素内容宽度为100px, padding宽度为10px,border宽度为20px, margin宽度为30px 5.DOM属性之 OffsetWidth

    1K60

    web前端开发初学者十问集锦(3)

    但是前提是需要对其父元素显示设置宽度和高度,否则无效。 注意,对父元素显示设置宽度和高度也可以使用n%这种百分比形式,前提还是如上描述那样,父元素父元素高度和宽度要明确设置。...obj.offsetWidth 指obj控件自身宽度,整型,单位像素,由元素width + padding + border组成。...offsetWidth 与 style.width 区别 一、offsetTop 返回是数字,而 style.top 返回是字符串,除了数字外还带有单位:px。...但是事情还没完,万恶IE不支持此方法,它有自己一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在,如:obj.currentStyle.paddingLeft...至于说为什么不执行setTimeout,是因为js工作机制是:当线程中没有执行任何同步代码前提下才会执行异步代码,setTimeout是异步代码,所以setTimeout只能等js空闲才会执行,但死循环是永远不会空闲

    1.6K20
    领券