获取svg元素的高度和宽度（或其他属性）

比眉伴天荒 2022-05-16 11:53 290阅读 0赞

下面给出了基于svg元素的js对象获取属性的方法（jqury对象可以转成js对象获取，主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度，但两种定义方式获取属性的方法有所不同）：

**如果想要获取svg内text文本元素的位置信息（包括宽度高度等），请点这里：[传送门][Link 1]**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    </head>
    <body>
    <svg id="svgContainerA" width="800px" height="500px" style="margin: 5px; border: 2px solid #3f8ce8;"></svg>
    <svg id="svgContainerB" style="margin: 5px; border: 2px solid #3f8ce8; width: 800px; height: 500px;"></svg>
    </body>
    <script> let containerA = document.getElementById("svgContainerA"); let containerB = document.getElementById("svgContainerB"); /** * ---js对象和jquery对象的互相转换---start--- */ let JQContainerA = $(containerA); containerA = JQContainerA[0]; /** * ---js对象和jquery对象的互相转换---end--- */ /** * ---获取svg高度/宽度---start--- */ //输出为height is ---500px--- width is ---800px---，以attribute定义的高度和宽度需要从attributes的value中获取 console.log("height is ---" + containerA.attributes.height.value + "--- width is ---" + containerA.attributes.width.value + "---"); //输出为height is ------ width is ------，此时尝试从style中读取到高度和宽度为空 console.log("height is ---" + containerA.style.height + "--- width is ---" + containerA.style.width + "---"); //containerB.attributes没有height和width属性，所以会提示Uncaught TypeError: Cannot read property 'value' of undefined // console.log("height is ---" + containerB.attributes.height.value + // "--- width is ---" + containerB.attributes.width.value + "---"); //输出为height is ---500px--- width is ---800px---，在style内定义的高度和宽度（或其他样式）可以直接从style对应的样式名中获取 console.log("height is ---" + containerB.style.height + "--- width is ---" + containerB.style.width + "---"); /** * ---获取svg高度/宽度---end--- */ </script>
    </html>

[Link 1]: https://blog.csdn.net/lqlqlq007/article/details/94027669