html 我怎样才能得到一个< iframe>容器来封装我< svg>的元素，而不需要滚动条或填充元素< svg>？

vcirk6k6 于 11个月前发布在其他

关注(0)|答案(2)|浏览(100)

我尝试在静态HTML文档中的JS中动态创建SVG图像。我在页面上创建了一个空的iframe元素。请注意，我将此用作学习练习，因此它是使用静态元素构建的。我没有引用任何外部站点（因此没有bootstrap或其他包）。
我目前使用的iframe代码（在.html页面上）如下所示。
在我的JS代码中，我想调整高度和宽度，以创建一个包围我的SVG图像的框。我生成的SVG标题是：我无法克服的挑战是，当svg头部的宽度和高度维度被分配给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中。蓝色矩形是我尝试查看视图框的外部限制，不会成为我完成项目的一部分。
x1c 0d1x的数据

Html

来源：https://stackoverflow.com/questions/77714234/how-can-i-get-an-iframe-container-to-enclose-my-svg-element-without-scroll-b

2条答案

按热度按时间

von4xj4u1#

要让SVG适合它的容器，您需要在SVG上设置preserveAspactRatio="none"
当您需要使用IFRAME时，

创建一个本地Web组件<fit-svg src="your.svg">，

使用shadowDOM，因此您不必担心SVG中的CSS或重复ID

获取src属性中定义的外部SVG
设置所有必需的<style>
注入 * 获取的 * SVG
在SVG上设置preserveAspactRatio="none"
由于每个人都抱怨shadowDOM难以样式化，

我额外添加了一个...this.children来将所有lightDOM移动到shadowDOM

<script>
  // define <fit-svg> anytime you like. There is no ONLOAD/PARSED dependency
  customElements.define("fit-svg", class extends HTMLElement {
    async connectedCallback() {
      this.attachShadow({mode:"open"}).innerHTML = "";
      this.shadowRoot.append(
          Object.assign(document.createElement("style"), {
              innerHTML: ":host{ display:inline-block   }" +
                         "div  { width:100%;height:100% }" +
                         "svg  { height:100%;width:100% }"
          }),
          Object.assign(document.createElement("div"), {
              innerHTML: await (await fetch(this.getAttribute("src"))).text()
          }),
          ...this.children
      )
      this.shadowRoot.querySelector("svg")
                     .setAttribute('preserveAspectRatio', 'none');
    }
  })
</script>
<style>
  #SVG1 { width:100px;height:150px;background:pink }
  #SVG2 { width:300px;height:180px;background:pink }
</style>
<!-- NOW ALL HTML REQUIRED IS: -->
<fit-svg id=SVG1 src="//svg-cdn.github.io/heart.svg">
     <style> path:nth-child(2n+2) { fill: GREEN } </style>
</fit-svg>
<fit-svg id=SVG2 src="//svg-cdn.github.io/heart.svg">
     <style> path:nth-child(2n+2) { fill: RED } </style>
</fit-svg>

字符串

的数据