That said, does anyone have any idea how to use clipPath to cut a shape out of another shape? Like, if I want to cut a circle out of the intersection of two lines?
I don't want the bit of the intersection that's in the circle, I want the bits that are outside the circle.
This feels like a thing that folks would commonly want to do. And yet, nothing on the internet suggests it's possible.
Which, I guess, kind of sums up my whole front-end journey so far.
@epidiah Ah, interesting! Could you define a style and apply it to both? I think SVG supports style tags.
<svg>
<defs>
<style>
.someStyle { fill: #ff0000 }
</style>
</defs>
<path class="someStyle" d="...">
</path>
<svg>
@epidiah Oh, I think I misunderstood the assignment. So you have two lines (like stroke objects with a width and colour and all that) and you want to bring down a cookie-cutter and chop a chunk out of them?
This seems hacky, but what about if your "mask" shape was actually a rectangle that filled the canvas, and had a hole out of the middle of it. That way the circle in the middle is actually a negative space so the clipPath shows the "outside" of circle?
@epidiah I can provide you with an SVG produced in Illustrator that is a rectangle with a hole cut out of the middle. Is that helpful? I think it's even under 500 characters so it would fit in a post.
Sorry, I've worked with SVG before but I'm not pro; this seems doable based on my experience but please tell me to buzz off if I'm being overbearing here.
Add comment