Question

我有带有模式的内联SVG。我需要两种不同的页面布局 - 一种用于＆＃34;媒体打印＆＃34;另一个用于浏览器。我正在动态创建#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>

Answer 1

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

HTML

<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>

JS

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

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

Answer 2

您可以使用use元素来实现此目的。当您使用id创建SVG图形时，可以使用use元素在任何位置引用它，就像这样。

<span class="media-print-only">
  <div class="svg-container">
    <svg width="200px" height="200px">
      <use xlink:href="#svgCanvas"/>
    </svg>   
  </div>
</span>

<span class="media-no-print">
  <div class="svgRealPlace">
    <svg width="200px" height="200px">
      <use xlink:href="#svgCanvas"/>
    </svg>
  </div>
</span>

<!--defining base SVG graphic-->
<svg width="0" height="0">
  <svg id="svgCanvas" width="200px" height="200px">
    <defs>
      <pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="5" fill="blue"/>
      </pattern>
    </defs>
    <circle cx="100" cy="100" r="100" fill="url(#pattern)"/>
  </svg>   
</svg>

注意：
基本svg元素或其祖先元素不得具有 display:none样式或hidden属性，因为它们会破坏对基础svg的引用。所以我将容器svg元素的大小设置为0以隐藏屏幕。

img src = svg在同一个文档中

2 个答案: