Trouble getting inline SVG to scale properly with its parent

Question

Trouble getting inline SVG to scale properly with its parent

Attempting to utilize SVG as an alternative to clippath due to limited cross-browser support has proven challenging. Each time I make the attempt, I face the same issue: the SVG functions properly but appears small and does not scale to fit the designated element. Despite numerous efforts, I have been unable to pinpoint the error.

<div id="container">  
  <div id="target">
    <div id="Box_Collectors">      
      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams...
      </div>

       <div class="blackBox">
        <h1>TITLE</h1>
        <div> One morning, when Gregor Samsa woke from troubled dreams...
      </div>

       <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams...        
      </div>      
    </div>
  </div>


<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     class="" viewBox="0 0 100 100" clipPathUnits="objectBoundingBox">
      <defs>
        <clipPath id="blackBox-clip">
          <polygon points="100 0, 100 100, 0 100, 0 35, 15 25, 0 15, 0 0"></polygon>          
      </clipPath>
      </defs>
    </svg>

</div>

The CSS is provided below:

* { color: #fff }

.blackBox {
  background: #000;
  position: relative;
  z-index: 100;
  height: 300px;
  width: 300px;
  margin: auto;
  padding-left: 60px;
  -webkit-clip-path: url("#blackBox-clip");
  clip-path: url("#blackBox-clip");
}

View the demonstration of the issue here.

html css svg

Answer 1

Answer №1

To achieve the desired effect, there are two key elements needed to make it work seamlessly. Firstly, clipPathUnits must be included within the clipPath element, and the units designated for objectBoundingBox should represent fractions of the bounding box. Implementing the following code snippet will produce the desired outcome:

<clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
        <polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
</clipPath>

* {
  color: #fff
}
.blackBox {
  background: #000;
  position: relative;
  z-index: 100;
  height: 300px;
  width: 300px;
  margin: auto;
  padding-left: 60px;
  /*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);*/
  -webkit-clip-path: url("#blackBox-clip");
  clip-path: url("#blackBox-clip");
}

<div id="container">
  <div id="target">
    <div id="Box_Collectors">
      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>
    </div>
  </div>


  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" class="" viewBox="0 0 100 100">
    <defs>
      <clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
        <polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
      </clipPath>
    </defs>
  </svg>

</div>

Answer 2

To achieve the desired effect, there are two key elements needed to make it work seamlessly. Firstly, clipPathUnits must be included within the clipPath element, and the units designated for objectBoundingBox should represent fractions of the bounding box. Implementing the following code snippet will produce the desired outcome:

<clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
        <polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
</clipPath>

* {
  color: #fff
}
.blackBox {
  background: #000;
  position: relative;
  z-index: 100;
  height: 300px;
  width: 300px;
  margin: auto;
  padding-left: 60px;
  /*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);*/
  -webkit-clip-path: url("#blackBox-clip");
  clip-path: url("#blackBox-clip");
}

<div id="container">
  <div id="target">
    <div id="Box_Collectors">
      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>
    </div>
  </div>


  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" class="" viewBox="0 0 100 100">
    <defs>
      <clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
        <polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
      </clipPath>
    </defs>
  </svg>

</div>

Answer 3

Answer №2

While using Safari version 10.0.2 (12602.3.12.0.1), I am experiencing a strange issue where only the first box is rendered. Interestingly, on my work-in-progress website, the boxes reappear when I scroll up to a specific point on the page.

Do you have any insights into what might be causing this behavior?

Answer 4

While using Safari version 10.0.2 (12602.3.12.0.1), I am experiencing a strange issue where only the first box is rendered. Interestingly, on my work-in-progress website, the boxes reappear when I scroll up to a specific point on the page.

Do you have any insights into what might be causing this behavior?

Trouble getting inline SVG to scale properly with its parent

Answer №1

Answer №2

Similar questions

Top-notch loading icon using jquery

Establish a buffering system for the <video> element

Backdrop styling for Material-UI dialogs/modals

Generating HTML content using Angular 8 and JSON data

Is there a way to align both the horizontal and rotated lines to intersect at a common point in HTML and CSS?

Tips for retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Seamless movements to the exact midpoint

Retrieving information from SQL and transferring it to PHP

Incorporating a header include on every page throughout my website

Achieving proper stacking of a table with other div elements

What is the best way to convert HTML into a format where the nesting implied by header levels is made clear and explicit?

Methods for activating touch-like scrolling through the use of mouse grabbing and dragging

CSS Toggle failing to show updated styles

Loading an animated SVG sprite file in real-time

Having trouble with Bootstrap 4: I want to rotate an image, but every time I try, it ends up overwriting the CSS properties

Creating a button with multiple background gradients using CSS

What are the steps to create a dynamic navigation menu in Angular 2?

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

Gmail not displaying image - troubleshoot with Django Python-Postmark

PHP function with JSON response encountered an error during the AJAX call