Geek asks and answers

Hide svg parts to print

Is it possible to hide parts of svg in the print layout. A.

I like to hide the height of the range. The selection and navigator will print the page.

This should work without js triggert buttons. It should work when the print button of browsers is used.

Is it possible to show / hide an element using css media = print and associate this event with jquery?

It is necessary to hide the print layout on the yellow details: http://i49.tinypic.com/24mbxop.png

for this example:

$(function() {

    $.getJSON('http://www.highcharts.com/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.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

+5
source share
2 answers

What @Bondye said.

Create a class similar to

@media print {
    .unprintable {
        visibility: hidden;
    }
}

svg,

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

, .

http://jsfiddle.net/EqDGQ/

visibility: hidden; , display: none;.

EDITED

, Javascript .

hide(), . / hide(), , , . / hide().

, .unprintable. , .

, , JS, - : http://jsfiddle.net/EqDGQ/1/

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

----------------

!:)

JS- ( jQuery), .unprintable svg :

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');
};

:

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

-, , rightAligned true, y svg ( x = 0 ) xMin xMax .

: http://jsfiddle.net/DXYne/1/

?

+7

, , css, Javascript ( ) :

@media print {
    svg circle[fill="blue"] { 
       display:none; 
    }
}

, .

+2

More articles:


All Articles