如何获得一个 <iframe> 容器来包围我的 <svg> 元素，而无需滚动条或在 <svg> 元素周围填充？

Question

我正在尝试在静态 HTML 文档中的 JS 中动态创建 SVG 图像。我在页面上创建了一个空的 iframe 元素。请注意，我将其用作学习练习，因此它是使用静态元素构建的。我没有引用任何外部站点（因此没有引导程序或其他包）。

我当前使用的 iframe 代码（在 .html 页面上）如下。

在我的 JS 代码中，我想调整高度和宽度以创建一个围绕我的 SVG 图像的框。我生成的 SVG 标头是： 我无法克服的挑战是，当 svg header 的宽度和高度尺寸分配给 iframe 的高度和宽度时，我会在右侧看到一个垂直滚动条。如果我向 iframe 高度添加 16 个单位，滚动条就会消失，但现在图像底部有一个空白区域。当我在浏览器（Chrome）开发人员工具中检查它时，我无法确定该区域属于什么部分。我尝试过填充、边距以及其他我能找到的有意义的东西。我可能会诉诸于我的 iframe 周围没有边框（这没关系），但我想从中了解可以做什么。

顺便说一句，我在网上看到了有关在 iframe 中使用 div 元素的建议，这也没关系。我不确定它是否重要，但我生成的 svg 图像将被下载并用作独立图像，因此我首先使用 iframe。

感谢您耐心解答这个冗长的问题。

在我的 html 页面上：

    <iframe
      id="ifBarcodeImage"
      name="ifBarcodeImage"
      style="border:1px solid red; padding:0px; margin:0px; display:auto"
      height="200px"
      width="200px"
      srcdoc=""
    />

并在我的js代码中生成：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 324 120" enable-background="new 0 0 324 120" xml:space="preserve">
.
.
.
</svg>

最后，这是生成图像的屏幕剪辑。理想情况下，我希望蓝色矩形显示在红色矩形内，周围没有边框/填充。或者，我也可以将整个 svg 图像集中在 iframe 中。蓝色矩形是我尝试查看视图框的外部限制，不会成为我完成的项目的一部分。

Answer 1

您只需将属性

scrolling=“no”

添加到您的 iframe 即可。从技术上讲，当 HTML5 首次发布时，它已被弃用，但是，每个浏览器都完全支持它，并且不太可能改变，因为它会破坏太多现有网站。目前这仍然无法通过 CSS 实现。