Img Src=svg In The Same Document

I have inline SVG with patterns. I need two different page layouts - one for 'media print' another one for browsers. I am creating everything in #svgCanvas dynamically and I need i

Solution 1:

You can use use element for this purpose. When you create SVG graphic with id, you can refer it in any place by using use element, like this.

<spanclass="media-print-only"><divclass="svg-container"><svgwidth="200px"height="200px"><usexlink:href="#svgCanvas"/></svg></div></span><spanclass="media-no-print"><divclass="svgRealPlace"><svgwidth="200px"height="200px"><usexlink:href="#svgCanvas"/></svg></div></span><!--defining base SVG graphic--><svgwidth="0"height="0"><svgid="svgCanvas"width="200px"height="200px"><defs><patternid="pattern"width="10"height="10"patternUnits="userSpaceOnUse"><circlecx="5"cy="5"r="5"fill="blue"/></pattern></defs><circlecx="100"cy="100"r="100"fill="url(#pattern)"/></svg></svg>

Note: Base svg element or its ancestor elements must not havedisplay:none style or hidden property, because they break reference to base svg. So I set size of container svg element to 0 to hide from screen.

Solution 2:

I found a workaround to this problem - use jquery to move svg to printable place just before window.print() method and put the svg back to its original place straight after the method:

HTML

<spanclass="media-print-only">
  some-stuff
  <divclass="svg-container"></div></span><spanclass="media-no-print">
  some more stuff
  <divclass="svgRealPlace"><svgid="svgCanvas"><defs> some patterns </defs>
      some lines and rectangles that are using patterns in defs
    </svg></div>
  again more stuff
</span>

JS

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

Tested on Chrome, Firefox and Edge. I really hope there exists a better solution since DOM modifications are almost never a good idea.