首頁 > web前端 > css教學 > 使用內嵌 SVG 時如何確保剪輯路徑的響應式對齊?

使用內嵌 SVG 時如何確保剪輯路徑的響應式對齊?

Mary-Kate Olsen
發布: 2024-11-02 03:37:30
原創
480 人瀏覽過

How can I ensure responsive alignment of clip-paths when using inline SVG?

具有內嵌 SVG 的響應式剪輯路徑

將剪輯路徑應用於具有背景的元素時,通常會嵌入 SVG 內聯。但是,您可能會遇到響應性或對齊問題,如下例所示:

<code class="html"><header id="block-header">
  <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
    <defs>
      <clipPath id="myClip">
        <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z" />
      </clipPath>
    </defs>
  </svg>
</header></code>
登入後複製

問題

在此範例中,內嵌SVG 具有明確的尺寸(4000 像素寬),這使得可能比標題的實際大小大得多。因此,剪輯路徑變得不成比例地大,導致意外的對齊。

解決方案:clipPathUnits="objectBoundingBox"

要建立響應式剪輯路徑,您可以使用clipPathUnits= “objectBoundingBox”屬性:

<code class="html"><svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z" />
    </clipPath>
  </defs>
</svg></code>
登入後複製

使用此屬性, SVG 的viewBox 和尺寸無關,並且剪輯路徑會縮放到應用它的元素的邊界框。這確保了剪輯路徑的響應靈敏且一致的對齊,無論元素的大小如何。

以上是使用內嵌 SVG 時如何確保剪輯路徑的響應式對齊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板