0

I'm not too well versed (yet?) in using SVG for the web. What I do know is that simple shapes are better than complex paths, if at all possible (due to simple points versus pathing points). Because of this, I've attempted to recreate a logo using very simple paths (ellipses and rectangles, with a few path shapes - adjusted simple shapes - where necessary).

By using simple shapes, using object order relevance (top/bottom), I can obscure certain areas of the logo without resorting to using paths. Unfortunately that obscured area may, for certain purposes, need to be transparent.

Therefore, I'm wondering if it's possible to create an SVG that uses defined paths (of simple objects) that can be applied as clipping paths via CSS declarations, or just a solid color, depending?

Example:

Example Image

Here, the white used to create the whites of the eyes and the mouth may need to be transparent, clipping at the lower yellow object. At other times it may be required for these objects to have a colored fill. In this example, would I need two completely separate files to solve the problem, or is it possible to do this with a single file? If with a single file, would I instead have to resort to using paths instead of simple shapes?

Edit/Update: Upon looking more closely at the solution provided by Danielillo (and after having tested CSS's clip-path property) I discovered SVG's filter element and options. The feFlood filter should provide the capabilities that I originally didn't know that I was actually looking for.

Improve this question

1 Answer 1

Reset to default
1

Here a Codepen with the same SVG in two div:

  • The first one with a clipping mask

  • The second one is the same SVG with the clipping mask but with another shape on the background:

    <!--THIS IS THE ADDED CIRCLE-->
<circle fill="red" cx="31.8" cy="31.8" r="31.6">   
<!--END-->
Improve this answer
4
  • I guess the example was not intricate enough to show what I was specifically trying to do, but it seems that it's not possible to define standard shapes (by targeting its ID) as a clipping mask via CSS, it must be defined within the SVG's XML structure as a clipping mask. Would I be correct in that assumption?
    – BrendonKoz
    Jun 22, 2018 at 14:01
  • Sure there will be a CSS solution. I'm not a programer, but if with fifeten min. I've got this fake trick, a good programer can take away the svg mask.
    – user120647
    Jun 22, 2018 at 14:12
  • 1
    Further testing: clip-path is the CSS rule that can be used to apply a custom viewport to an element. In SVGs, a clipping path must be defined outside of the normal flow of the SVG's defined visible paths (a <clipPath> element within the SVG's <defs> element). Source: sarasoueidan.com/blog/css-svg-clipping That said, your solution actually provided the answer that I actually wanted without knowing: filter's feFlood; also defined in <def>. That should provide me with all that I'd want to do. Thank you! I'll update my question to clarify why your answer is correct. 👍
    – BrendonKoz
    Jun 25, 2018 at 19:52
  • 1
    Actually, what I wanted was to define a proper mask. That was all that I needed. Still great information and led me to the correct answer - thanks Danielillo!
    – BrendonKoz
    Jun 26, 2018 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.