Я наблюдаю очень разный рендеринг для статического и динамического SVG. Рассмотрим следующий фрагмент:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic SVG</title>
<script>
window.onload = (event) => {
let svgNS = 'http://www.w3.org/2000/svg';
let xlinkNS = 'http://www.w3.org/1999/xlink';
let div = document.createElement('div');
let svg = document.createElementNS(svgNS, 'svg');
svg.classList.add('dynamic');
// try commented out also
svg.setAttributeNS(svgNS, 'viewBox', '-8 -8 40 40');
let useTag = document.createElementNS(svgNS, 'use');
useTag.setAttributeNS(xlinkNS, 'xlink:href', '#menu');
svg.appendChild(useTag);
div.appendChild(svg);
document.body.appendChild(div);
};
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<symbol id="menu">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-4.5 14c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm4.5 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm4.5 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z" />
</symbol>
</svg>
<div>
<!-- <svg class="static"> -->
<svg class="static" viewBox="-8 -8 40 40">
<use xlink:href="#menu"></use>
</svg>
</div>
</body>
</html>
Это выглядит в Chrome и Firefox следующим образом:
Статический тег SVG огромен, а динамический SVG крошечный. Однако, если вы изучите HTML в DevTools:
* +1012 *
Вы можете видеть, что окончательная разметка для обоих SVG абсолютно одинакова. Разница лишь в том, что один является статическим в HTML, а другой создается динамически с помощью JavaScript.
Однако, если я изменю фрагмент, чтобы у тегов SVG не было атрибута viewBox, рендеринг будет совсем другим:
Это ожидаемый результат: одна и та же разметка производит тот же рендеринг.
Итак, мой вопрос: почему один и тот же атрибут viewBox создает такие радикально отличающиеся визуализации: статический и динамический?
К вашему сведению: этот фрагмент - очень упрощенная версия проекта, над которым я работаю. Я использую viewBox для определения размера и расположения глифов на тегах кнопок. Путь SVG был создан с viewBox = "0 0 24 24". Viewbox = "- 8 -8 40 40" предназначен для уменьшения и центрирования глифа на квадратную кнопку размером 48 пикселей.