文章/答案/技术大牛

发布

问静态SVG与动态SVG
EN

Stack Overflow用户

提问于 2019-04-01 13:43:37

回答 1查看 1.3K关注 0票数 3

我观察到静态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中的超文本标记语言：

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

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

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

所以，我的问题是:为什么相同的viewBox属性会产生如此截然不同的渲染:静态渲染和动态渲染？

仅供参考:这段代码是我正在处理的一个项目的一个非常简化的版本。我使用viewBox来调整按钮标记上的字形的大小和位置。SVG路径是用viewBox="0 0 24 24“创建的。viewbox="-8 -8 40 40“旨在缩小字形并将其居中放置在一个48px的方形按钮上。

javascript

html

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-01 13:50:16

viewBox属性不需要特殊的NameSpace。您添加的内容不是标准的，因此无法被浏览器识别。

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55448716

复制

相似问题

问静态SVG与动态SVG
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问静态SVG与动态SVGEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问静态SVG与动态SVG
EN