SVG chemin pour créer un triangle avec des coins arrondis

Question

Je suis en train de créer un simple chemin svg sous la forme d'un triangle avec des coins arrondis.

Je suis parti de ce triangle:

<svg width="440" height="440"> 
 
    <path d="M5,100 L70,5 L135,100 z" fill="none" stroke="black" stroke-width="3" /> 
 
</svg>

Mais je me bats à ajouter dans les coins - c'est aussi loin que j'ai:

<svg width="440" height="440"> 
 
    <path d="M5,100 a10,10 1 0 1 -5,-10 L70,5 L135,90 a10,10 1 0 1 5,10 z" fill="none" stroke="black" stroke-width="3" /> 
 
</svg>

Quelles sont les coordonnées de trajectoire correctes pour créer le triangle avec trois coins lisses? Ai-je besoin de faire de la géométrie pour calculer les strart et les points de terminaison corrects ou existe-t-il un outil que je peux utiliser pour configurer la forme qui me donnera les coordonnées dont la forme est composée?

Answer 1

Inkscape dispose d'une option permettant de convertir le tracé d'un tracé en objet rempli. Avec ce que vous pouvez:

1. Dessinez un triangle simple et définir le remplissage à aucun.
2. Définissez un trait dont la largeur est le double du rayon de l'arrondi que vous souhaitez obtenir.
3. Définir stroke-linejoin:round (Boîte de dialogue Remplissage et contour -> Style de contour -> Jointure ronde).
4. Sélectionnez dans le menu Chemin -> Stroke to Path.

5. Défini sur le mode de sélection de noeud. Vous pouvez maintenant supprimer tous les nœuds du côté interne.

6. Définissez de nouveau le remplissage et sélectionnez un trait à votre convenance.