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

最新推荐文章于 2024-03-15 09:38:37 发布

讨厌走开啦

最新推荐文章于 2024-03-15 09:38:37 发布

阅读量1.5w

点赞数 2

分类专栏： javascript 文章标签： svg 高度宽度获取 height

本文链接：https://blog.csdn.net/lqlqlq007/article/details/81875996

版权

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这里换成你本地的jquery地址或线上的jquery地址 -->
    <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>

讨厌走开啦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
获取svg元素的高度和宽度（或其他属性）

下面给出了基于svg元素的js对象获取属性的方法（jqury对象可以转成js对象获取，主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度，但两种定义方式获取属性的方法有所不同）：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫