what is the use of <geometry-box> values?

Issue

I have tried using values like fiil-box, strok-box, view-box, margin-box etc but didn’t see any result. Perhaps I wrote the wrong code, or are these values outdated?

If you can, please provide one example using one of the values.

and this is my example…

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HAYTI</title>
  <style>
   .div-head {
      background: lime;
      width: 548px;
      height: 420px;
   }
   .leftValue {
    float: left;
    margin: 40px;
    padding: 10px;
    border: 24px solid black;
    background-color: orange;
    clip-path: view-box  url(#myClip);
   }
   .clearParam {
    clear: both;
   }
  </style>
 </head> 
 <body>  
 <div class="div-head"><div class="leftValue"><img            
     src="https://i.stack.imgur.com/uLUbH.jpg\" alt=""></div></div>>
  <svg width="100" height="100" viewBox="100 100 100 100">
      <clipPath id="myClip">
        <circle cx="60" cy="200" r="60" fill="orange"/>
      </clipPath>
  </svg>>

 </body>
</html>

Solution

<geometry-box> values are only available for basic shapes (primitives created in css clip-path rules).

From MDN docs

If specified in combination with a , this value defines
the reference box for the basic shape. If specified by itself, it
causes the edges of the specified box, including any corner shaping
(such as a border-radius), to be the clipping path.

Your clip-path is a svg url – adding a geometry-box parameter will disable the clip-path.

Besides, browser support is yet spotty (compare the examples in chrome and firefox):

clip-path: view-box circle(25% at 25% 25%)

Currently does not work in Chromium-based browsers.

You could either use a simple css based clip-path like:

 clip-path: circle(50% at 50% 50%);

or a svg based as described here by Eric A. Meyer

Example: css and svg clip-path

.resize {
  resize: both;
  padding: 1em;
  border: 1px solid #ccc;
  overflow: auto;
  width: 25%;
  background: #ccc;
}
svg {
  border: 1px solid #ccc;
}

img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.clipped {
  clip-path: url(#myClip);
  max-width: 100%;
}

.clippedCss {
  clip-path: circle(50% at 50% 50%);
  max-width: 100%;
}

<p>resize me</p>
<div class="resize">
  <img class="clipped" src="https://i.stack.imgur.com/uLUbH.jpg\" alt="">
  <img class="clippedCss" src="https://i.stack.imgur.com/uLUbH.jpg\" alt="">
</div>

<svg viewBox="0 0 1 1" style="position:absolute;height:0; width:0; overflow:hidden">  
  <clipPath clipPathUnits="objectBoundingBox" id="myClip">
    <circle cx="50%" cy="50%" r="50%" fill="orange" />
  </clipPath>
</svg>

Answered By – herrstrietzel

Answer Checked By – David Goodson (AngularFixing Volunteer)

Issue

Solution

Example: css and svg clip-path

Leave a Reply Cancel reply