title: What is the use of geometry-box in clip-path?
body: <p>I was going through the MDN website to learn about the <code>clip-path</code> property. Here is the link : <a href="https://developer.mozilla.org/en/docs/Web/CSS/clip-path" rel="nofollow noreferrer">https://developer.mozilla.org/en/docs/Web/CSS/clip-path</a></p>
  <p>Now, I understand most of what the website says but I don't understand the following parts. Could anyone please explain them to me preferably with a demo?</p>
  <blockquote>
  <p><code>&lt;geometry-box&gt;</code> If specified in combination with a <code>&lt;basic-shape&gt;</code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by border-radius) as clipping path.</p>
  <p><code>fill-box</code> uses the object bounding box as reference box.</p>
  <p><code>stroke-box</code> uses the stroke bounding box as reference box.</p>
  <p><code>view-box</code> uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.</p>
  </blockquote>
  <p>My questions are what exactly is a <code>geometry-box</code> and what does <code>reference box</code> mean in the context of clipping?</p>
  <p>How is a <code>reference box</code> useful during clipping?</p>
  <p>What is a stroke bounding box? Is it related to SVG?</p>
  <p>Can you please provide a working example with all these values?</p>