Почему элементы SVG, сгенерированные в JavaScript, не имеют такого же размера, как элементы SVG, определенные непосредст ⇐ Html

[Anonymous]

У меня есть кнопки с значками SVG внутри них, которые добавляются на страницу с использованием JavaScript. Я хотел бы, чтобы эти значки вели себя как SVGS, как правило, в любой другой ситуации - подчиняясь правилам CSS. Однако, когда кнопки генерируются, размер SVG (и путь внутри него) является странным - всегда 300px x 150px, что не соответствует размерам определенного видового ящика (в данном случае 0 0 24) и это Не под влиянием каких -либо CSS. Путь выходит на 24x24 пикселей в верхнем правом углу этого контейнера и не масштабируется с контейнером SVG или элементом кнопки выше. /
Если этот тот же элемент напрямую объявляется напрямую в HTML, он появляется, как и ожидалось - с SVG, соответствующим размерам элемента кнопки, в котором он помещен.
javascript : < /p>
var controls = true

if (controls == true) {
// generate the reset button
var resetSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

var resetSvgPath = document.createElementNS(
"http://www.w3.org/2000/svg",
"path",
);

resetSvg.setAttribute("class", "icon reset-icon");

resetSvg.setAttribute("viewbox", "0 0 24 24");

resetSvg.setAttribute("preserveAspectRatio", "xMinYMax meet");

resetSvg.setAttribute("fill-rule", "evenodd");

resetSvg.setAttribute("clip-rule", "evenodd");

resetSvgPath.setAttribute(
"d",
"M2.458 9.012c-.297.947-.458 1.955-.458 3 0 5.52 4.481 10 10 10 5.52 0 10-4.48 10-10 0-5.519-4.48-10-10-10-2.121 0-4.083.668-5.703 1.796l1.703 2.204h-6.58l1.935-6.012 1.718 2.223c1.958-1.389 4.346-2.211 6.927-2.211 6.623 0 12 5.377 12 12s-5.377 11.988-12 11.988-12-5.365-12-11.988c0-1.036.132-2.041.379-3h2.079zm10.35-3.012c.292.821.375 1.346 1.01 1.609.637.264 1.073-.052 1.854-.423l1.142 1.142c-.373.787-.687 1.218-.423 1.854.262.634.784.716 1.609 1.009v1.617c-.816.29-1.347.375-1.61 1.01-.264.636.052 1.071.424 1.853l-1.142 1.142c-.79-.375-1.219-.687-1.85-.424-.639.265-.723.793-1.014 1.611h-1.616c-.292-.821-.375-1.347-1.01-1.61-.637-.264-1.072.052-1.854.423l-1.142-1.142c.366-.771.689-1.212.423-1.854-.263-.635-.793-.719-1.609-1.009v-1.617c.817-.29 1.346-.373 1.609-1.009.264-.637-.051-1.07-.423-1.854l1.142-1.142c.788.374 1.218.687 1.854.423.635-.263.719-.792 1.01-1.609h1.616zm-.808 8c-1.105 0-2-.896-2-2 0-1.105.895-2.001 2-2.001 1.104 0 2 .896 2 2.001 0 1.104-.896 2-2 2z",
);

resetSvg.appendChild(resetSvgPath);

var resetButton = document.createElement("button");

resetButton.classList.add("reset-button");

resetButton.appendChild(resetSvg);

document.body.appendChild(resetButton);
}
< /code>
css: < /p>
button {
width: 5rem;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... s-svg-elem