[Débutant] Lancer l'impression d'une zone bien précises (svg)

Bonjour toutes et tous,

Dans une page HTML, je "construit" un svg (sous la balise SVG). J'aimerai savoir, s'il est possible d'imprimer uniquement cette zone (pas le reste de la page) et si oui, comment ?

style :

Code:

<button type="text" onclick=" impression()">Print</button>

Mais quoi mettre dans la fonction impression() ?

D'avance merci.

Belle journée et bonne continuation.

D.

:salut:

La seule commande disponible en JS étant window.print(), il faut cacher ce qui ne doit pas être imprimé avant d'imprimer.

Pour cela on utilise @media print { ... }, exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* code du test */
                
                stop.begin {
                        stop-color:yellow;
                }
                stop.end {
                        stop-color:green;
                }
                
                @media print {
                        main > *:not(svg) {
                                display: none;
                        }
                }
                
                /* fin code du test */
                
        </style>
	<script>
                'use strict';
                                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        // code du test
                        
                        
                        // fin code du test
                
                }, false );
                
                window.addEventListener( "load", ev => {
                        // le DOM est construit et la page web est visible
                        // code du test
                        
                        document.querySelector( "#printSVG" ).addEventListener( "click", ev => {
                                window.print();
                        }, false );
                        
                        // fin code du test
                
                }, false );
  </script>
</head>
<body>
	<main>
 
		<div>
			<p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta
			vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero
			solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis
			horrebant</p>
		</div>
 
		<svg>
			<linearGradient id="gradient">
				<stop class="begin" offset="0%"/>
				<stop class="end" offset="100%"/>
			</linearGradient>
			<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
			<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
		</svg>
 
		<div>
			<p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta
			vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero
			solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis
			horrebant</p>
		</div>
 
		<button id="printSVG">Imprimer le Graphique</button>
 
	</main>
</body>
</html>

Bonjour danielhagnoul,

Un grand merci.

Si je peux en profiter un peu, ... Mon impression ce fait toujours en mode paysage, n'est-il pas possible de forcer l'orientation.

J'ai essayer d'ajouter dans le CSS :
Code:

1 2 3 @page { size:portrait; };
mais sans succès.

Auriez-vous une piste d'idée ou une solution ?

D'avance merci.

Belle journée.

D.

1 pièce(s) jointe(s)

J'utilise les propriétés de l'imprimante, qui sont accessibles au travers de l'interface d'impression du navigateur.

Ci-dessous les réglages disponibles dans Chrome :

Pièce jointe 305118