Ukryj svg części na wydruku

Question

Czy istnieje możliwość ukrycia części svg w układzie wydruku.

Specjalnie lubię ukrywać highstock rangeSelector i nawigator wydrukuje stronę.

Powinno to działać bez przycisków js triggert. Powinien działać, gdy użyto przycisku drukowania w przeglądarce.

Czy istnieje możliwość pokazania/ukrycia elementu za pomocą css media = print i powiązania tego zdarzenia z jquery?

trzeba ukryć na żółtych części na układzie wydruku: http://i49.tinypic.com/24mbxop.png

dla tego przykładu:

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

Co powiedział @Bondye.

utworzyć klasę coś podobnego

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

i zastosować klasę do SVG elementy nie chcesz drukować

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

I próby drukowania, niebieskie koło będzie niewidoczny .

http://jsfiddle.net/EqDGQ/

Jeśli visibility: hidden; nie działa dla Ciebie, spróbuj display: none; również.

EDITED

Jeśli nie można dodać klasę, gdy są one rysowane, użyć JavaScript, aby dodać tę klasę po załadowaniu strony.

Nie można użyć funkcji ukrywania(), ponieważ spowoduje to również usunięcie elementów z ekranu. Musisz otworzyć nową kartę/okno i wywołać funkcję hide(), ale jak wspomniano w pytaniu, użytkownicy mogą używać menu przeglądarki do drukowania. Wtedy nie masz szansy na otwarcie nowej karty/okna i wywołanie hide().

Należy więc dodać klasę .unprintable podczas ładowania strony. Następnie na ekranie wszystko jest pokazane, ale na wydruku nie można drukować elementów.

Jeśli umieścić link do witryny, a powiedz mi, co chcesz ukryć, mogę pomóc napisać kod JS, ale to będzie coś takiego: http://jsfiddle.net/EqDGQ/1/

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

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

Edytowany ponownie! :)

Napisałem tę funkcję JS (potrzebne jQuery), która dodaje ".niecenzuralny”class do wszystkich elementów svg wewnątrz prostokątnego obszaru:

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

i można wywołać tę funkcję tak:

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 

Jeśli chcesz coś ukryć, że jest wyrównany do prawej, ustaw rightAligned param do true ustawić oś y na prawej krawędzi SVG (czyli x = 0, przy prawej krawędzi) i ustawić Xmin oraz Xmax w związku z powyższym

ja to na ryba. http://jsfiddle.net/DXYne/1/

Czy to może być rozwiązanie?

Answer 2

Powyższe jest prawdziwe, ale dla podejścia, które nie wprowadza nowych klasę CSS, JavaScript (chociaż kocham go tak) lub logiki wykonywania:

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

Nadzieję, że to pomaga.