Ceci est une ancienne révision du document !
Transparency – or its counterpart, opacity – is such a fundamental concept in Inkscape that it was one of the earliest topics covered in this series. Back in Part 3 you were introduced to the Opacity spin-box on the status bar, which gives you the ability to set a single transparency level for a whole object, or even a group of objects. If you want a single object to have varying opacity – such as completely transparent at one end, and opaque at the other – you can use a gradient for the fill and stroke. But what about doing the same for a group of objects? You could set suitable gradients on each individual item in the group separately to get the desired effect, but if your group contains lots of objects, then that approach becomes tedious very quickly. The solution to this problem is masking. This is a technique that uses a grayscale image as a means of specifying the opacity of another object or group. Any white sections in the image cause that part of the masked object to appear opaque. Black sections cause that part to appear transparent. And grays in-between result in varying levels of opacity.
La transparence - ou son homologue , l'opacité - est un concept si fondamental dans Inkscape qu'il a été l'un des premiers sujets abordés dans cette série . Retour à la partie 3, vous avez été présentés à la boîte de modification de l'opacité sur la barre d'état, qui vous donne la possibilité de définir un niveau de transparence unique pour un objet entier, ou même un groupe d'objets .
Si vous voulez qu'un seul objet ait une opacité variable comme - complètement transparent à une extrémité, et opaque à l'autre - vous pouvez utiliser un dégradé pour le remplissage et le trait. Mais en est-il de même pour un groupe d'objets ? Vous pouvez définir des gradients appropriés sur chaque élément dans le groupe séparément pour obtenir l'effet désiré, mais si votre groupe contient beaucoup d'objets, alors l'approche devient pénible très rapidement.
La solution à ce problème est : le masquage. Il s'agit d'une technique fait utilisé une image en niveaux de gris comme un moyen de spécifier l'opacité d'un autre objet ou d'un groupe. Toutes les parties blanches de l'image ont pour conséquence pour les parties de l'objet masquées d'être opaque. Les sections noir ont pour effet que les parties masquées apparaissent transparentes. Et gris entre les deux suite à différents niveaux d'opacité.
Let's look at an example. In this image (below) I've placed a solid red circle on top of a solid green background. The green is there mainly to show the effect more clearly. On top of the circle is a rectangle with a white-black-white gradient. Using this rectangle as a mask for the circle gives the result of a clipped circle that fades from opaque to transparent and back to opaque. Note that anything outside the mask is clipped. In that respect, masking could even be used as an alternative to the clip paths that were introduced in the previous part of this tutorial. Draw your mask entirely in white – or in solid shades of white and black – and any parts of the masked object which lie outside the mask, or which are colored black, will be clipped. Usually I recommend using a clip path in preference to a mask if you simply want a hard clipped edge, but, as we will see later in this article, there are times when it's easier to use a mask.
Regardons un exemple. Dans cette image (ci-dessous), j'ai placé un cercle rouge solide sur un fond vert. Le vert est là principalement pour montrer l'effet plus clairement. Le haut du cercle est un rectangle avec un dégradé blanc-noir-blanc. L'utilisation de ce rectangle comme masque pour le cercle donne le résultat d'un cercle coupé qui passe d'opaque à transparent et puis redevient opaque.
Remarquez que tout ce qui se situe en dehors du masque est tronqué. De fait, le masquage pourrait même être utilisé comme alternative aux chemins de découpe qui ont été présentés dans la partie précédente de ce tutoriel. Dessinez votre masque entièrement en blanc - ou dans des nuances de blanc et de noir - et toutes les parties de l'objet masqué qui se trouvent à l'extérieur du masque, ou qui sont de couleur noire, seront coupées. Habituellement, je recommande d'utiliser un chemin de découpe, de préférence à un masque si vous voulez simplement un bord dur coupé, mais, comme nous le verrons plus tard dans cet article, il y a des moments où il est plus facile d'utiliser un masque
You may recall that the fill and stroke of a clip path are irrelevant to the final effect on the clipped object. With masks, however, the opposite is true – the color of each individual pixel is taken into account when calculating its effect on the masked object, so fills and strokes have significance. Did I say pixel? In a vector format? In practice, there are few cases where an SVG file is actually used as a purely vector format. If you want to display an SVG file on a computer screen, or print it to an inkjet or laser printer, it is ultimately converted to pixels. Masking takes place during this final output step, so although the mask may be made up of vector objects, and the item being masked is also a vector, the final result is really generated only at the point that those vectors are converted to individual pixels for display or printing.
Vous pouvez rappeler que le remplissage et le trait d'un chemin de découpe ne sont pas pertinents pour l'effet final sur l'objet tronqué. Avec les masques, CEPENDANT, le contraire est vrai - la couleur de chaque pixel individuel est pris en compte dans le calcul de son effet sur l'objet masqué, ainsi les remplissages et les traits ont une signification.
Ai-je dit pixel ? Dans un format vectoriel ? Dans la pratique, rares sont les cas où un fichier SVG est effectivement utilisé comme un format purement vectoriel. Si vous souhaitez afficher un fichier SVG sur un écran d'ordinateur, ou l'imprimer sur une imprimante à jet d'encre ou laser, il est converti au final en pixels. Le masquage a lieu lors de cette étape de sortie finale, et ce bien que le masque peut être constitué d'objets vectoriels, et que l'objet masqué est aussi vectoriel, le résultat final n'est vraiment généré qu'uniquement au moment où ces vecteurs sont convertis en pixels individuels pour l'affichage ou l'impression.
Using a thick-stroked rectangle and strictly black or white pixels, it's easy to see the difference between a clip path and the use of a mask to simulate clipping. In the top pair of images, I've used the rectangle as a clip path, and you can see that the result is aligned with the center line of the stroke. The second and third pairs of images show the rectangle being used as a mask, with only white parts remaining and black parts becoming transparent. It's especially clear in the last pair that the stroke has an effect.
By now it should be clear that clipping and masking are similar operations, so it's not really surprising that Inkscape exposes them with the same user interface. Just as with clipping, the masking object must be on top of the object to be masked, in terms of the z-index. You then select both items and choose Set Mask from the context menu, or Object > Mask > Set from the main menu. Releasing a masked object is as simple as selecting it (it will be described as “Masked” in the status bar) then choosing Release Mask from the context menu, or Object > Mask > Release from the main menu. Just as with clip paths, it is possible to edit masks using the node tool without releasing them first, but generally there's little benefit to doing so as you can edit only the outline shape of the path, not its color.
As you've seen, using a grayscale gradient as a mask gives you some control over the opacity of the masked object. You may also recall that Inkscape offers a selection of black and white patterns in its Fill & Stroke dialog, plus a few grayscale bitmap fill patterns. These may previously have seemed rather limiting, but their monochrome nature makes them perfect for use as a mask. The checkerboard pattern is a good example of a situation where it's easier to use a mask than a clip path. This same effect could be achieved by clipping with a complex path, but it's probably not worth the extra effort. Looking closely at the checkerboard, you'll notice that the fill isn't made up of black and white squares, but rather white and transparent. Using white and transparent can sometimes make it easier to see what parts of an object you are masking: white areas will remain visible, and transparent areas will be clipped. A translucent white area will have the same effect as a shade of gray. It may seem counter-intuitive to cover the parts of the object that you want to keep, and expose the parts that will be hidden, but that's the way that masking has been defined in the SVG specification, so that's the way it works in Inkscape.
Because clip paths are defined by a boundary and a concept of what's inside and outside that boundary, it's possible to use only a single path or object to define a clipping shape. Masks, on the other hand, are concerned with only the color of pixels, so it doesn't really matter whether your mask is made up of a single object or a whole load of objects inside a group. This allows you to create complex arrangements of colors and patterns which would be impossible to reproduce using a single path.
This example uses a group made up of a few random objects as a mask. You can see that the repeating radial gradient of the rectangle, made up of a white-to-transparent transition, results in a similar pattern being visible from the masked red circle. But by adding extra black and white features to the mask group, you can “override” the pattern with explicit sections of transparency and opacity. One thing to note is the place where the black line crosses the white one: because the black line is on top, the pixels at that position are black, so that part of the masked object is transparent. It doesn't matter what's going on within the group, all that matters is the color of the final pixels. This may not be the best piece of abstract art in the world, but it would have been a lot harder to draw without using masks.
Although you can use masks to create complex arrangements of clipping and transparency, probably the most common use is simply to add “feathering” to the edges of a group so that it fades into the background. In that case all you need for your mask design is a strongly blurred white ellipse, as demonstrated in this wholly unseasonal greeting card design.
Throughout this article I've referred to masks as being grayscale images. That's not strictly true – a mask can be any combination of colors that you want. However, anything other than white, black or gray will be converted into a grayscale image before it's used as a mask. This can make it difficult to predict the exact effect of a color on the resultant opacity, so I recommend using pure grayscales when drawing your masks in almost all cases.