获取svg宽高
时间: 2023-08-19 08:05:45 浏览: 62
要获取SVG的宽高,可以使用以下方法:
1. 在HTML中,使用JavaScript获取SVG元素的width和height属性值:
```javascript
var svg = document.getElementById('my-svg');
var width = svg.getAttribute('width');
var height = svg.getAttribute('height');
console.log('SVG宽度:' + width);
console.log('SVG高度:' + height);
```
2. 在CSS中,使用width和height属性获取SVG的宽高:
```css
svg {
width: 100px;
height: 50px;
}
/* 获取SVG宽高 */
var svg = document.getElementById('my-svg');
var width = window.getComputedStyle(svg, null).getPropertyValue('width');
var height = window.getComputedStyle(svg, null).getPropertyValue('height');
console.log('SVG宽度:' + width);
console.log('SVG高度:' + height);
```
注意:在HTML中设置的width和height属性,如果没有设置单位,则默认为像素。在CSS中,如果没有设置单位,则会使用默认的单位,比如px。如果使用了百分比作为单位,则需要考虑父元素的大小。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)