Nascondi parti svg su stampa

Question

Esiste la possibilità di nascondere parti di svg nel layout di stampa.

Specialy mi piace per nascondere highstock rangeSelector e navigatore volontà pagina di stampa.

Questo dovrebbe funzionare senza i pulsanti js triggert. Dovrebbe funzionare quando è stato utilizzato il pulsante di stampa del browser.

C'è qualche possibilità di mostrare/nascondere un elemento con css media = stampa e associare questo evento con jquery?

necessità di nascondere sulle parti gialle sul layout di stampa: http://i49.tinypic.com/24mbxop.png

per questo esempio:

$(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/

Answer 1

Cosa @Bondye detto.

Creare una classe qualcosa come

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

e applicare la classe al svg elementi che non si desidera stampare

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

E si tenta di stampare, il cerchio blu sarà invisibile .

http://jsfiddle.net/EqDGQ/

Se visibility: hidden; non funziona per voi, provate display: none; pure.

CURA

Se non è possibile aggiungere la classe quando vengono disegnati, utilizzare Javascript per aggiungere che classe dopo il caricamento della pagina.

Non è possibile utilizzare hide() perché rimuoverà anche gli elementi dallo schermo. Dovrai aprire una nuova scheda/finestra e chiamare hide(), ma come indicato nella domanda, gli utenti possono usare il menu del browser per stampare. Quindi, non hai la possibilità di aprire una nuova scheda/finestra e di chiamare hide().

Pertanto, quando la pagina viene caricata, è necessario aggiungere la classe .unprintable. Quindi, sullo schermo viene mostrato tutto, ma sulla stampa, gli elementi .un non stampabili non verranno stampati.

Se si pubblica un link al sito, e mi dicono che cosa si vuole nascondere, posso aiutare a scrivere il codice JS, ma sarà qualcosa di simile a: http://jsfiddle.net/EqDGQ/1/

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

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

Modificato di nuovo! :)

Ho scritto questa funzione JS (jQuery necessaria), che aggiunge ".non stampabile" classe per tutti gli elementi SVG all'interno di un'area rettangolare:

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

e si può chiamare questa funzione come questa:

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 

Se avete bisogno di nascondere qualcosa che è allineato a destra, impostare la rightAligned param per true per impostare l'asse y al bordo destro della svg (significato x = 0 sul bordo destro) e regolare xmin e xmax conseguenza

metto questo al violino. http://jsfiddle.net/DXYne/1/

01.235.

Questa può essere una soluzione?

Answer 2

Quanto sopra è vero, ma per un approccio che non introduce nuova classe CSS, JavaScript (anche se mi piace così), o la logica di esecuzione:

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

Speranza che aiuta.