Soustrayez un cercle d'un autre en SVG
j'essaie de trouver un moyen de soustraire une forme à une autre en SVG, créant un trou dans le milieu ou une morsure sur le côté. Un peu comme un chemin de coupure, mais au lieu de montrer l'intersection, je veux montrer une des parties en dehors de l'intersection. une solution impliquait L'utilisation D'Adobe Flex, mais je ne savais pas comment l'implémenter correctement. Je comprends qu'il y ait un moyen de faire ceci dans Inkscape en utilisant les opérations de chemin booléen, mais je veux garder les éléments de cercle comme ils sont au lieu de les transformer en éléments de chemin.
<defs>
<subtractPath id="hole">
<circle r="50" cx="100" cy="100" />
</subtractPath>
</defs>
<circle id="donut" r="100" cx="100" cy="100" subtract-path="url(#hole)" />
4 réponses
Un masque est ce que vous voulez. Pour créer un <mask> , faites des choses que vous voulez garder blanches. Les choses que tu veux être invisible rendent noir. Des couleurs entre le résultat de la translucidité.
ainsi le SVG résultant est similaire à votre pseudo-markup et ressemble à ceci:
<svg width="200" height="200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<circle r="50" cx="100" cy="100" fill="black"/>
</mask>
</defs>
<circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" />
</svg>Nous remplissons le masque avec un rectangle blanc, et ensuite, nous avons un cercle noir où nous voulons que le trou.
L'astuce est d'utiliser remplir la règle pour contrôler l'affichage d'un clip-path. Un exemple de donut (carré) serait
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="300" height="300">
<defs>
</defs>
<g transform="translate(50, 50)">
<path d="M 0 0 L 0 200 L 200 200 L 200 0 z
M 50 50 L 50 150 L 150 150 L 150 50 z" fill-rule="evenodd"/>
</g>
</svg>
qui utilise la propriété fill-rule of shapes pour supprimer le carré intérieur - vous pouvez ajuster cela à faire avec des chemins plus beaux pour créer un cercle selon les besoins.
une fois que vous avez créé le chemin de clipping de base, vous pouvez en créer un - voir cette entrée MDN pour information sur clip-path.
| * | masque: utilisé pour soustraire les objets:
|=> fill="blanc" => Blocs à afficher
|=> fill="black" => les Blocs pour les Supprimer
|=> fill="blanc" => Mettre le Bloc d'Affichage à l'intérieur du masque et la balise de remplir les blancs
|=> fill="black" => Mettre le Supprimer Bloc à l'intérieur du masque et la balise de remplissage noir
/:: | Exemple pour utiliser le masque pour enlever Centre Petit rect de grand rect
<rect x="20" y="20" width="60" height="60" mask="url(#rmvRct)"/>
<mask id="rmvRct">
<rect x="20" y="20" width="60" height="60" fill="white"/>
<rect x="40" y="40" width="20" height="20" fill="black"/>
</mask>
/:: / exemple d'utilisation d'un masque pour enlever le petit cercle central du grand cercle:
<circle cx="50" cy="50" r="45" mask="url(#rmvCir)"/>
<mask id="rmvCir">
<circle cx="50" cy="50" r="45" fill="white"/>
<circle cx="50" cy="50" r="25" fill="black"/>
</mask>
deux réponses suggèrent (1) d'utiliser un
les deux réponses suggérées résolvent le "trou dans le milieu" partie de la question mais seule la masque approche est une solution raisonnable pour la "morsure hors du côté "partie (B)) . L'utilisation de la evenodd fill-rule signifie que les deux formes sont traitées de manière égale, de sorte que la partie de la deuxième forme qui ne se croise pas la première fera partie du résultat. Afin de mordre quelque chose d'une forme de "mordant" forme aurait à partager une partie de sa frontière avec le mordu de la forme. Cela pourrait être difficile à réaliser dans la pratique.
Un exemple: pour soustraire un cercle à partir d'un autre cercle, vous devez créer un "mordre" forme qui est l'intersection de deux cercles.
l'approche du masque est beaucoup plus universelle.