clipPath frente a máscara

Estas cosas son tan similares que me resulta difícil mantenerlas claras. Esta es una pequeña y agradable explicación de viewBox (qué nombre y URL tan geniales , espero que sigan así).

Lo importante es que clipPath(el elemento en SVG, así como clip-pathen CSS) es vectorial y cuando se aplica, lo que sea que esté recortando está dentro o fuera . Con una máscara, también puedes hacer una transparencia parcial , lo que significa que puedes usar un degradado para, por ejemplo, atenuar lo que estás enmascarando. Entonces se me ocurre que las máscaras son más poderosas, ya que pueden hacer todo lo que puede hacer un trazado de clip y más.

Sarah también tiene una publicación completa sobre esto.

Lo que siempre me desconcierta con las máscaras es la idea de que pueden ser luminancede estilo, es decir, el blanco es transparente, el negro es opaco y todo lo que hay en el medio es parcialmente transparente. O pueden ser alphade estilo, donde el canal alfa del píxel es el carácter alfa de la máscara. Escribir eso se siente relativamente claro, pero cuando luego lo aplicas a un elemento se siente todo al revés y confuso.