How to Create a Responsive Clip-Path with Inline SVG?

Responsive Clip-Path with Inline SVG

When using SVG to create a clip-path for an element with a background, it's important to understand how viewBox and preserveAspectRatio work. The viewBox attribute defines the dimensions of the SVG's content, while preserveAspectRatio determines how that content is scaled and fitted within the element.

In your code snippet, you're applying the clip-path to a header element with a height of 100px:

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}</code>

However, your SVG has a viewBox of "0 0 4000 1696", meaning that the clip-path is being applied with a width of 4000px. This is likely much larger than the actual width of the header element, which is why you're not seeing the desired effect.

To create a responsive clip-path, you need to define the SVG's viewBox to match the dimensions of the element it's being applied to. You can also use the clipPathUnits attribute to specify that the path is defined in units relative to the bounding box of the element:

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}

#myClip {
  clipPathUnits: objectBoundingBox;
}</code>

With these changes, the SVG will be scaled to fit the dimensions of the header element, and the clip-path will be applied correctly.

The above is the detailed content of How to Create a Responsive Clip-Path with Inline SVG?. For more information, please follow other related articles on the PHP Chinese website!