SVG clip-path inverse

Asked Feb 01 '17 at 11:23

Active Feb 01 '17 at 12:30

Viewed 864 times

There are solution for using clip-path and inverse area?

<svg viewBox="0 0 100 14" preserveAspectRatio="xMidYMin">
  <defs>
    <clipPath id="triangle">
      <polygon points="0,0 100,0 0,14" />
    </clipPath>
  </defs>
  <polygon points="100,0 100,14, 0,14" />
  <circle cx="50" cy="14" r="14" fill="red" />
</svg>
<div class="skew">
  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym...
</div>

Demo: https://jsfiddle.net/kicaj/vw2qobcm

I would like show the second part of red circle.
Remember: Bottom part of circle is above of div:)

Solution: https://jsfiddle.net/kicaj/vw2qobcm/3/

edited Feb 01 '17 at 12:30

asked Feb 01 '17 at 11:23

kicaj

2,881
5
42
68

What is the second part of red circle? for that matter, what is the first part and how many parts are there? – Robert Longson Feb 01 '17 at 11:50
Do you mean to say that you need [this](https://jsfiddle.net/vw2qobcm/2/)? – Harry Feb 01 '17 at 12:10
Thanks guys, but i created what i want: https://jsfiddle.net/kicaj/vw2qobcm/3/ – kicaj Feb 01 '17 at 12:26
1

Ok, you can do this with `clip-path` itself also (like [this](https://jsfiddle.net/vw2qobcm/4/)). – Harry Feb 01 '17 at 12:32
@Harry, Of course, You're right, thanks! – kicaj Feb 02 '17 at 15:31
You're welcome! Do you want me to post that as an answer explaining how it works? – Harry Feb 02 '17 at 15:32
@Harry, Yes, You can! – kicaj Feb 17 '17 at 18:48

SVG clip-path inverse

0 Answers0