the above is true, but for an approach that doesn't introduce new a css class, javascript (even though i love it so), or runtime logic:

@media print {
    svg circle[fill="blue"] { 

hope it helps.


what @bondye said.

create a class something like

@media print {
    .unprintable {
        visibility: hidden;

and apply the class to the svg elements you don't want to print

<svg xmlns="" version="1.1">
   <circle cx="50"  cy="50"  r="40" fill="red" />
   <circle cx="150" cy="50"  r="40" fill="red" />
   <circle cx="50"  cy="150" r="40" fill="blue" class="unprintable" />
   <circle cx="150" cy="150" r="40" fill="red" />

and you try to print, the blue circle will be invisible.

if visibility: hidden; doesn't work for you, try display: none; as well.


if you cannot add the class when they are drawn, use javascript to add that class after the page loads.

you can't use hide(), because it will remove the elements from screen as well. you'll have to open a new tab/window and call hide(), but as it is mentioned in the question, users may use the browser menu to print. then, you don't have the chance to open a new tab/window and call hide() .

so, you must add the .unprintable class when the page loads. then, on the screen everything is shown, but on print, .unprintable elements won't be printed.

if you post a link to the site, and tell me what you want to hide, i can help you write the js code, but it will be something like:

$(function() {
    $('svg circle[fill="blue"]').attr('class', 'unprintable');


edited again! :)

i wrote this js function (jquery needed), that adds the ".unprintable" class to all the svg elements within a rectangular area:

setunprintablearea = function(id, xmin, ymin, xmax, ymax, rightaligned) {
    if (rightaligned) {
        svgwidth = $('#'+id+' .highcharts-container svg')[0].getboundingclientrect().width;
        xmin += svgwidth;
        xmax += svgwidth;
    $('#'+id+' .highcharts-container svg *').filter(function() {
        rect = this.getboundingclientrect();
        return (xmin <= rect.left && rect.right  <= xmax &&
                ymin <=  && rect.bottom <= ymax);
    }).attr('class', 'unprintable');

and you can call this function like this:

setunprintablearea('container', 15, 45, 240, 70); // zoom
setunprintablearea('container', -55, 15, 0, 40, true); // top-right buttons
setunprintablearea('container', 0, 430, number.max_value, number.max_value); // horiz scroll bar

if you need to hide something that is right-aligned, set the rightaligned param to true to set the y-axis to the right edge of the svg (meaning x=0 at the right edge) and adjust xmin and xmax accordingly.

i put this on fiddle:

can this be a solution?

More Query from same tag