admin管理员组

文章数量:1327945

Is there any possibility to hide parts of svg at print layout.

Specialy i like to hide highstock rangeSelector and navigator will printing page.

This should work without js triggert buttons. It should work when browsers print button was used.

Is there any possibility to show / hide an element with css media=print and bind this event with jquery?

Need to hide on the yellow parts on print layout: .png

for this example:

$(function() {

    $.getJSON('.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

});

.7.2/highslide-software/highcharts/tree/master/samples/stock/demo/basic-line/

Is there any possibility to hide parts of svg at print layout.

Specialy i like to hide highstock rangeSelector and navigator will printing page.

This should work without js triggert buttons. It should work when browsers print button was used.

Is there any possibility to show / hide an element with css media=print and bind this event with jquery?

Need to hide on the yellow parts on print layout: http://i49.tinypic./24mbxop.png

for this example:

$(function() {

    $.getJSON('http://www.highcharts./samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

});

http://jsfiddle/gh/get/jquery/1.7.2/highslide-software/highcharts./tree/master/samples/stock/demo/basic-line/

• javascript
• jquery
• media-queries
• highcharts

Share Improve this question Follow edited Mar 16, 2013 at 13:09 GreenRover asked Mar 13, 2013 at 8:44 GreenRoverGreenRover 1,52611 gold badge1515 silver badges3636 bronze badges 3

• Yes, display: none;visibility: hidden; on the elements, class or ID of the svg part. This offcourse in the media=print – Ron van der Heijden Commented Mar 15, 2013 at 11:32
• But those elements have no id class. It needs to be done by javascript – GreenRover Commented Mar 15, 2013 at 11:41
• With jQuery this can be done with .hide() – Ron van der Heijden Commented Mar 15, 2013 at 11:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +25

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="http://www.w3/2000/svg" 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" />
</svg> 

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

http://jsfiddle/EqDGQ/

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

EDITED

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: http://jsfiddle/EqDGQ/1/

$(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.top  && 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: http://jsfiddle/DXYne/1/

Can this be a solution?

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"] { 
       display:none; 
    }
}

Hope it helps.

本文标签： javascriptHide svg parts on printStack Overflow