Jquery 同一文档中的img src=svg

我已经将SVG与模式进行了内联。我需要两种不同的页面布局-一种用于媒体打印，另一种用于浏览器。我正在svgCanvas中动态创建所有内容，我需要它显示在打印布局的底部

我的第一个想法是克隆整个svg，但后来我得到了相同ID的东西，Firefox和Edge对此感到非常不安。实现这一目标的替代方案是什么

我曾经考虑过svg到html5画布的转换，但由于某些原因，这对我来说并没有真正起作用，所以我想也许还有另一种更简单的方法，比如下面的方法？我知道这样做是可能的：

<img src="external.svg">

所以我认为我应该能够用内嵌svg做同样的事情

<span class="media-print-only">
  some stuff
  <img src="#svgCanvas">
</span>

<span class="no-media-print">
  some more stuff
  <svg id="svgCanvas">
    <defs> some <patterns> </defs>
    some lines and rectangles that are using patterns in defs
  </svg>
  again more stuff
</span>

---

我找到了解决此问题的方法-使用jquery将svg移动到window.print方法之前的可打印位置，并将svg直接放回方法之后的原始位置：

HTML

在Chrome、Firefox和Edge上测试。我真的希望有一个更好的解决方案，因为DOM修改几乎从来都不是一个好主意。

您可以使用use-element实现这一目的。创建id为的SVG图形时，可以使用use元素在任何位置引用它，如下所示

---

也许看看这个，它可能对对象有用，但对模式不完全有效。我正在使用JS动态地从其他具有xlink:href=someImages.png的模式中为我的矩形创建模式。我确实得到了不依赖于其他模式的部分模式。我已经尝试过这种方法，但没有任何帮助。你的注释：正是我遗漏的部分，它为你赢得了接受的答案。做得好！仅仅是一个小的添加-出于某种原因，我不仅需要设置svg副本的宽度和高度，还需要使用元素的宽度和高度来使其工作。

<span class="media-print-only">
  some-stuff
  <div class="svg-container"></div>
</span>

<span class="media-no-print">
  some more stuff
  <div class="svgRealPlace">
    <svg id="svgCanvas">
      <defs> some patterns </defs>
      some lines and rectangles that are using patterns in defs
    </svg>
  </div>
  again more stuff
</span>

function printButtonClicked(){
    $(".svg-container").append($('#svgCanvas'));
    window.print();
    $(".svgRealPlace").append($('#svgCanvas'));
}