Dibujar una forma anulada en SVG

Question

Quiero dibujar una forma en SVG que tiene el centro vaciado. Hice esta pregunta para dibujar un círculo con un círculo en el medio here. Me gustaría dibujar cualquier forma en SVG con el medio (de otra forma) ahuecado. Alguna idea?

estoy pensando que podría ser posible el uso de máscaras o ClipPaths pero no estoy seguro de si los entiendo totalmente

Answer 1

crear la forma que como un camino, que consiste en dos sub-caminos. El primer subtrayecto describe su forma externa; el segundo subtrayecto describe la forma interna. Establezca la regla de relleno de la ruta a 'evenodd'.

p. Ej. para un rectángulo ahuecado, hacemos un camino que consta de dos subrutas. Uno para el rectángulo exterior; uno para el rectángulo interior:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

<path d="M 100 100 L 200 100 L 200 200 L 100 200 z 
    M 110 110 L 190 110 L 190 190 L 110 190 z" 
    fill="red" 
    stroke="black" stroke-width="1" 
    fill-rule="evenodd"/> 

</svg>