Motif de remplissage simple en svg : hachures diagonales

Question

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.

Answer 1

J'ai adapté Chez Ingo répondre ici .

<defs>
    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
        <!-- background -->
        <path id="background"
            d="M-1,3 L3,-1
               M1,5 L5,1" style="stroke:pink; stroke-width:10" />
        <!-- hatches -->
        <path id="hatches"
            d="M-2,2 L2,-2
               M0,4 L4,0
               M2,6 L6,2" style="stroke:red; stroke-width:1" />
    </pattern>
</defs>

Ce motif comprend deux chemins, l'un pour le fond, l'autre pour les trappes. La couleur de fond est adressable vs JS tel que :

const hatchPath = document.querySelector("path#hatches");

hatchPath.setAttribute('style', "stroke:blue; stroke-width:1")

Le chemin de l'arrière-plan est exagérément large à dessein, de sorte qu'il n'y a aucune partie du motif qui ne soit pas au moins couverte par l'arrière-plan. La largeur des hachures peut être ajustée pour modifier l'épaisseur des lignes.