Question

我观察到静态SVG与动态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非常小。但是，如果您在DevTools中检查HTML：

您可以看到两个SVG的最终标记完全相同。唯一的区别是一个在HTML中是静态的，另一个是通过javascript动态创建的。

但是，如果我更改代码段以使SVG标签没有viewBox属性，则呈现方式会大不相同：

这是预期的结果：相同的标记产生相同的呈现。

所以，我的问题是：为什么同一个viewBox属性会产生如此根本不同的渲染：静态还是动态？

仅供参考：此代码段是我正在研究的项目的非常简化的版本。我使用viewBox在按钮标签上设置字形的大小和位置。 SVG路径是使用viewBox =“ 0 0 24 24”创建的。 viewbox =“-8 -8 40 40”旨在缩小字形并将其居中放置在48px的方形按钮上。

Answer 1

viewBox属性不需要特殊的名称空间。您添加的不是标准的，因此浏览器无法识别。

svg.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', '0 0 100 100');

console.log('no namespace', svg.getAttribute('viewBox')); // "50 50 50 50"
console.log('svgNS', svg.getAttributeNS('http://www.w3.org/2000/svg', 'viewBox')); // "0 0 100 100"

<svg id="svg" viewBox="50 50 50 50"></svg>

使用setAttribute('viewBox', '-8 -8 40 40')，就可以了。

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');

svg.setAttribute('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);

<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" viewBox="-8 -8 40 40">
    <use xlink:href="#menu"></use>
  </svg>
</div>

静态与动态SVG

1 个答案: