Пытаюсь сделать зависимость ширины svg от ширины родителя
Для этого завел две переменные ...и их использую
В console.log выводится 100px это верно, так и должно быть но svg должно быть 100px * 2 но выходит NaN и я так же понимаю что это не ошибка но и не число ..
Как можно исправить ситуацию ?
let item = document.querySelector(".item-svg"),
x = 10,
n = 0,
c = x*2,
vh = x*6,
start = `m ${n} ${n} h${x} v${x}`,
c1 = `c ${n} ${x} ${x} ${x} ${x} ${c}`,
c2 = `c ${n} ${x} ${-x} ${x} ${-x} ${c}`,
finish = `v ${x} h ${-x}`,
con = `${start} ${c1} ${c2} ${finish}`,
svg = document.createElementNS('http://www.w3.org/2000/svg', "svg"),
path = document.createElementNS('http://www.w3.org/2000/svg', "path"),
color = getComputedStyle(item).backgroundColor,
parentWidth = getComputedStyle(item).width;
console.log(parentWidth);
svg.setAttribute("viewBox", `0 0 ${c} ${vh}`);
svg.setAttribute("width", parentWidth*2);
console.log(svg.getAttribute("width"));
path.setAttribute("d", con);
path.setAttribute("fill", color);
svg.append(path);
item.append(svg);
html,body{
margin: 0;
}
.item-svg{
position: relative;
width: 100px;
height: 100vh;
background-color: pink;
}
.item-svg svg{
position: absolute;
left: 0;
}
<div class="item-svg"></div>
речь о этой переменной : parentWidth = getComputedStyle(item).width;
clientWidth
нужно запрашивать у рассчитанных стилей.width
- тоstyle
.clientWidth
- это вgetComputedStyle()