SVG начальный размер 0 0

Question

Я вставляю элемент SVG в HTML с помощью JS. Я хочу, чтобы элемент имел width=100% и height=200px. Затем я хочу вставить путь в элемент SVG. Путь d зависит от размера элемента SVG, но это 0 0 сразу после вставки. Я пробовал:

var board = document.createElementNS('http://www.w3.org/2000/svg','svg');
document.body.append(board);
var h = board.height.baseVal.value; //appears to be 0
var w = board.width.baseVal.value; //appears to be 0

Существует также этот CSS:

svg {
width: 100%;
height: 200px;
display: block;
}

Независимо от того, есть ли display: block, результат один и тот же. Я делаю что-то неправильно? Есть ли событие, которое срабатывает, когда мой элемент получает ненулевую высоту и ширину? Спасибо!

Answer 1

Значением по умолчанию для атрибутов <svg> width и height является 100%.
Атрибут IDL, к которому вы обращаетесь, будет отражать это.

То, что вам нужно, это, скорее, ограничивающий прямоугольник вашего узла, но в HTML по умолчанию будет 300 * 150, если эти атрибуты не установлены явно (я не помню точно, почему, что-то делать сinline-replaceElements IIRC ..., но это также касается и

var board = document.createElementNS('http://www.w3.org/2000/svg','svg');
document.body.append(board);
console.log(board.width.baseVal.valueAsString); // "100%"

// what you want is the bounding rect
const rect = board.getBoundingClientRect();
const w = rect.width; // 300 (+2 border)
const h = rect.height; // 150 (+2 border)

console.log(w, h);

svg {  border: 1px solid; }

Если вы хотите установить значение по умолчанию, отличное от 300 * 150, вам придется явно установить эти атрибуты:

var board = document.createElementNS('http://www.w3.org/2000/svg','svg');
board.setAttribute('width', '100%');
board.setAttribute('height', '100%');

document.body.append(board);
console.log(board.width.baseVal.valueAsString); // "100%"

// what you want is the bounding rect
const rect = board.getBoundingClientRect();
const w = rect.width;
const h = rect.height;

console.log(w, h);

svg {  border: 1px solid; }