代码之家 › 专栏 › 技术社区 › Paul Lovell

为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

svg css html javascript

Paul Lovell · 技术社区 · 4 月前

我有一些内置SVG图标的按钮,它们是使用JavaScript添加到页面中的。我希望这些图标的行为与SVG在任何其他情况下的行为一样——遵守CSS规则。然而,当生成按钮时,SVG的大小(以及其中的路径)很奇怪——总是300px x 150px,这与定义的viewBox的尺寸不匹配(在这种情况下,0 0 24 24),也不受任何CSS的影响。该路径位于该容器右上角的24x24像素处,不随SVG容器或其上方的按钮元素缩放。

https://jsfiddle.net/zbsdum28/

如果这个完全相同的元素直接在HTML中声明,它就会像预期的那样出现——SVG与它所在的按钮元素的尺寸相匹配。

https://jsfiddle.net/cu9t3gsx/

我尝试添加各种不同的CSS样式来尝试解释这一点,并更改SVG的属性,但虽然SVG元素确实有反应,但其中的路径没有反应,大小保持不变。我认为问题在于我在JavaScript中创建元素的方式,但我不知道为什么,也找不到任何方法来纠正它。

var controls = true

if (controls == true) {
  // generate the reset button
  var resetSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  var resetSvgPath = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "path",
  );

  resetSvg.setAttribute("class", "icon reset-icon");

  resetSvg.setAttribute("viewbox", "0 0 24 24");

  resetSvg.setAttribute("preserveAspectRatio", "xMinYMax meet");

  resetSvg.setAttribute("fill-rule", "evenodd");

  resetSvg.setAttribute("clip-rule", "evenodd");

  resetSvgPath.setAttribute(
    "d",
    "M2.458 9.012c-.297.947-.458 1.955-.458 3 0 5.52 4.481 10 10 10 5.52 0 10-4.48 10-10 0-5.519-4.48-10-10-10-2.121 0-4.083.668-5.703 1.796l1.703 2.204h-6.58l1.935-6.012 1.718 2.223c1.958-1.389 4.346-2.211 6.927-2.211 6.623 0 12 5.377 12 12s-5.377 11.988-12 11.988-12-5.365-12-11.988c0-1.036.132-2.041.379-3h2.079zm10.35-3.012c.292.821.375 1.346 1.01 1.609.637.264 1.073-.052 1.854-.423l1.142 1.142c-.373.787-.687 1.218-.423 1.854.262.634.784.716 1.609 1.009v1.617c-.816.29-1.347.375-1.61 1.01-.264.636.052 1.071.424 1.853l-1.142 1.142c-.79-.375-1.219-.687-1.85-.424-.639.265-.723.793-1.014 1.611h-1.616c-.292-.821-.375-1.347-1.01-1.61-.637-.264-1.072.052-1.854.423l-1.142-1.142c.366-.771.689-1.212.423-1.854-.263-.635-.793-.719-1.609-1.009v-1.617c.817-.29 1.346-.373 1.609-1.009.264-.637-.051-1.07-.423-1.854l1.142-1.142c.788.374 1.218.687 1.854.423.635-.263.719-.792 1.01-1.609h1.616zm-.808 8c-1.105 0-2-.896-2-2 0-1.105.895-2.001 2-2.001 1.104 0 2 .896 2 2.001 0 1.104-.896 2-2 2z",
  );

  resetSvg.appendChild(resetSvgPath);

  var resetButton = document.createElement("button");

  resetButton.classList.add("reset-button");

  resetButton.appendChild(resetSvg);

  document.body.appendChild(resetButton);
}

button {
  width: 5rem;
}

1 回复 | 直到 4 月前

Octavian 4 月前

问题是你拼错了属性键 viewBox 作为 viewbox 在你的JS代码中,你生成的SVG实际上并没有一个有效的viewBox,即使你检查DOM并没有注意到细微的差异,它看起来是有效的。

所以,改变:

resetSvg.setAttribute("viewbox", "0 0 24 24");

致:

resetSvg.setAttribute("viewBox", "0 0 24 24");