Скрыть svg детали на печати

Question

Есть ли возможность спрятать части svg в макете печати.

я хотел специальным образом, чтобы скрыть highstock rangeSelector и навигатор воли страницу печати.

Это должно работать без кнопок js triggert. Он должен работать при использовании кнопки печати браузеров.

Есть ли возможность показать/скрыть элемент css media = print и связать это событие с jquery?

нужно скрыть на желтые части на макете печати: http://i49.tinypic.com/24mbxop.png

для этого примера:

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

Что сказал @Bondye.

Создать класс что-то вроде

@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), которая добавляет ".нецензурным»класс всех 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 установить ось ординат на правом краю (имеется в виду SVG х = 0 на правом краю) и отрегулировать Xmin и Xmax соответственно

Я положил это на скрипке:. http://jsfiddle.net/DXYne/1/

Может ли это быть решением?

Answer 2

выше верно, но подход, который не вносит новый класс CSS, JavaScript (несмотря на то, что я люблю его так), или логику выполнения:

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

Надеется, что это помогает.