|
下面给出了基于svg元素的js对象获取属性的方法（jqury对象可以转成js对象获取，主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度，但两种定义方式获取属性的方法有所不同）： <!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>
| 
收藏
淘帖
踩
