Question

当我在DOM中已经存在的SVG元素上使用setAttribute（'viewBox'）时，它被正确设置（使用大写的'b'）。

当我在JavaScript中创建一个SVG元素并在那里添加'viewBox'属性时。。。它以全小写字母结尾在DOM中。

为什么会这样？

document.querySelector('#circle svg').setAttribute('viewBox', '190 190 20 20');

let svg = document.createElement('svg'),
  circle = document.createElement('circle');

circle.setAttribute('cx', 200);
circle.setAttribute('cy', 200);
circle.setAttribute('r', 10);
svg.setAttribute('viewBox', '190 190 20 20');
svg.appendChild(circle);
document.body.appendChild(svg);

// document.querySelector('#circleGenerated svg').setAttribute('viewBox', '190 190 20 20');

svg {
  border: 2px dashed #666;
  width: 200px;
  height: 200px;
}

<p>Existing svg with dynamically added viewBox attribute:</p>
<div id="circle">
  <svg>
    <circle cx="200" cy="200" r="10" id="center-point" fill="#bbb" />
  </svg>
</div>

<p>Generated svg with dynamically added viewBox attribute:</p>

Answer 1

您必须使用document.createElementNS("http://www.w3.org/2000/svg", "svg")代替document.createElement('svg')

＆＃13;

document.querySelector('#circle svg').setAttribute('viewBox', '190 190 20 20');

let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
  circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

circle.setAttribute('cx', 200);
circle.setAttribute('cy', 200);
circle.setAttribute('r', 10);
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttribute('viewBox', '190 190 20 20');
svg.appendChild(circle);
document.body.appendChild(svg);

// document.querySelector('#circleGenerated svg').setAttribute('viewBox', '190 190 20 20');

＆＃13;

svg {
  border: 2px dashed #666;
  width: 200px;
  height: 200px;
}

＆＃13;

<p>Existing svg with dynamically added viewBox attribute:</p>
<div id="circle">
  <svg>
    <circle cx="200" cy="200" r="10" id="center-point" fill="#bbb" />
  </svg>
</div>

<p>Generated svg with dynamically added viewBox attribute:</p>

＆＃13;

Answer 2

您首先不是在创建有效的SVG元素。您不能使用createElement创建SVG元素（仅适用于HTML元素）。您必须使用createElementNS并提供SVG名称空间作为第一个参数。

let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
  circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

如何在使用JavaScript创建的SVG元素上设置viewBox？

2 个答案: