Comment remplir une forme SVG, non pas avec une seule couleur, une image ou un dégradé, mais avec un motif de hachures, si possible en diagonale.
Cela fait 2 heures et je n'ai rien trouvé (du moins après 2005).
Je me dis qu'un hack possible serait un PNG hachuré qui servirait de remplissage, mais ce n'est pas idéal.
Je n'ai rien trouvé non plus pour les hachures diagonales sur internet, je vais donc partager ma solution ici :
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2"
style="stroke:black; stroke-width:1" />
</pattern>(notez la minuscule "l" dans l'expression du chemin)
L'exemple ci-dessus crée une hachure avec des lignes diagonales allant du bas à gauche au haut à droite et espacées de 4 pixels. Outre la ligne diagonale ( M0,4 l4,-4 ), vous devez également tracer les bords supérieur gauche et inférieur droit de la zone du motif, car sinon la ligne sera "restreinte" en raison de l'écrêtage aux endroits où elle croise les bords du carré.
Pour remplir un rectangle avec ce motif, faites :
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
Utilisez l'attribut patternTransform pour faire pivoter un segment de ligne vertical (ou horizontal). Cette méthode permet d'obtenir des tuiles transparentes et utilise le chemin le plus simple possible. Le motif width permet de contrôler la proximité des trappes parallèles.
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" />
</pattern>
Ce code de http://bl.ocks.org/jfsiii/7772281 semble très propre et réutilisable :
svg {
width: 500px;
height: 500px;
}
rect.hbar {
mask: url(#mask-stripe)
}
.thing-1 {
fill: blue;
}
.thing-2 {
fill: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg>
<defs>
<pattern id="pattern-stripe"
width="4" height="4"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
</mask>
</defs>
<!-- bar chart -->
<rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect>
<rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect>
<rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect>
<!-- horizontal bar chart -->
<rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect>
<rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect>
<rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect>
</svg>
</body>
</html>
Vous pouvez peut-être créer ce que vous voulez en utilisant un système de gestion de l'information. <pattern> étiquette.
Comme point de départ, vous pouvez prendre cet exemple de le document MDN correspondant :
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="Triangle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10"/>
</pattern>
</defs>
<circle cx="60" cy="60" r="50"
fill="url(#Triangle)"/>
</svg>
Un problème avec le dessin d'une ligne diagonale à l'intérieur d'un motif est que, lorsque le motif est en mosaïque, les lignes ne sont pas toujours alignées, surtout avec des zooms élevés (cela dépend du moteur de rendu SVG que vous utilisez). La réponse de @Ingo ci-dessus tente de résoudre ce problème en dessinant les triangles dans les coins haut-gauche et bas-droit - mais encore une fois, avec certains moteurs de rendu et des zooms élevés, cela ne donne pas toujours le meilleur résultat - et parfois la ligne finit par ressembler à un chapelet de saucisses.
Une autre approche consiste à tracer une ligne horizontale dans le motif et à faire tourner le motif, par ex.
<svg:svg viewBox="0 0 100 100" version="1.1"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:defs>
<svg:pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)">
<svg:path d="M -1,2 l 6,0" stroke="#000000" stroke-width="1"/>
</svg:pattern>
</svg:defs>
<svg:rect x="0" y="0" height="100" width="100" fill="url(#diagonalHatch)"/> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
