1. Web
  2. SVG
  3. 指南
  4. HTML 的 SVG 效果

將 SVG 效果應用於 HTML 內容

現代瀏覽器支援在 CSS 樣式中使用 SVG 來將圖形效果應用於 HTML 內容。

您可以在樣式中指定 SVG，無論是同一文件內的還是外部樣式表中的。您可以使用 3 個屬性：mask、clip-path 和 filter。

注意： 外部檔案中的 SVG 引用必須與引用文件具有相同的源。

使用嵌入式 SVG

要使用 CSS 樣式應用 SVG 效果，您首先需要建立引用要應用的 SVG 的 CSS 樣式。

css
p {
  mask: url("#my-mask");
}

在上面的示例中，所有段落都透過帶有 ID my-mask 的 SVG <mask> 進行遮罩。

示例：遮罩

例如，您可以使用類似以下的程式碼，在 HTML 文件中，透過 SVG 和 CSS 建立一個用於 HTML 內容的漸變遮罩。

html
<svg height="0">
  <mask id="mask-1">
    <linearGradient id="gradient-1" y2="1">
      <stop stop-color="white" offset="0" />
      <stop stop-opacity="0" offset="1" />
    </linearGradient>
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
  </mask>
</svg>
css
.target {
  mask: url("#mask-1");
}
p {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
}
p.target {
  background: lime;
}

請注意，在 CSS 中，遮罩是透過 URL 指向 ID #mask-1 來指定的，該 ID 是其下方指定的 SVG 遮罩的 ID。其餘部分則詳細說明了漸變遮罩本身。

透過將上面定義的 target 類分配給一個元素來完成將 SVG 效果應用於 HTML 的操作，如下所示：

html
<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

上面的示例將被渲染並應用遮罩。

示例：裁剪

此示例演示瞭如何使用 SVG 來裁剪 HTML 內容。請注意，即使是連結的可點選區域也會被裁剪。

html
<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

<button>Toggle radius</button>

<svg height="0">
  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  </clipPath>
</svg>
css
.target {
  clip-path: url("#clipping-path-1");
}
p {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
}
p.target {
  background: lime;
}

這會建立一個由圓形和矩形組成的裁剪區域，為其分配 ID #clipping-path-1，然後在 CSS 中引用它。裁剪路徑可以分配給任何具有 target 類的元素。

您可以即時更改 SVG 並立即看到它們對 HTML 渲染的影響。例如，您可以調整上面建立的裁剪路徑中的圓形大小。

js
const circle = document.getElementById("circle");

function toggleRadius() {
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}

document.querySelector("button").addEventListener("click", toggleRadius);

示例：濾鏡

這演示瞭如何將濾鏡應用於 HTML 內容，使用的是 SVG。它建立了幾個濾鏡，這些濾鏡透過 CSS 應用於普通狀態和滑鼠懸停狀態下的三個元素。

html
<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

任何 SVG 濾鏡都可以這樣應用。例如，要應用模糊效果，您可以使用：

html
<svg height="0">
  <filter id="f1">
    <feGaussianBlur stdDeviation="3" />
  </filter>
</svg>

您也可以應用顏色矩陣。

html
<svg height="0">
  <filter id="f2">
    <feColorMatrix
      values="0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0      0      0      1 0" />
  </filter>
</svg>

以及更多濾鏡。

html
<svg height="0">
  <filter id="f3">
    <feConvolveMatrix
      filterRes="100 100"
      color-interpolation-filters="sRGB"
      order="3"
      kernelMatrix="0 -1 0
                   -1 4 -1
                    0 -1 0"
      preserveAlpha="true" />
  </filter>
  <filter id="f4">
    <feSpecularLighting
      surfaceScale="5"
      specularConstant="1"
      specularExponent="10"
      lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="20000" />
    </feSpecularLighting>
  </filter>
  <filter id="f5">
    <feColorMatrix
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 1 0 0 0"
      color-interpolation-filters="sRGB" />
  </filter>
</svg>

這五個濾鏡是透過以下 CSS 應用的：

css
p.target {
  filter: url("#f3");
}
p.target:hover {
  filter: url("#f5");
}
em.target {
  filter: url("#f1");
}
em.target:hover {
  filter: url("#f4");
}
pre.target {
  filter: url("#f2");
}
pre.target:hover {
  filter: url("#f3");
}

示例：模糊文字

為了模糊文字，有一個 CSS 濾鏡函式稱為 blur()。您可以使用 SVG 濾鏡達到相同的效果。

html
<p class="blur">Time to clean my glasses</p>
<svg height="0">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>

您可以在同一個類中應用 SVG 和 CSS 濾鏡。

css
.blur {
  filter: url("#wherearemyglasses");
}

模糊是計算密集型的，因此請確保謹慎使用它，尤其是在需要滾動或動畫的元素中。

示例：文字效果

與純 HTML 文字相比，SVG 效果還可以用於為文字新增更動態和靈活的新增方式。

透過結合使用 SVG 元素和 HTML 建立文字，您可以實現各種不同的文字效果。您可以旋轉文字。

html
<svg height="60" width="200">
  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">
    Example text
  </text>
</svg>

使用外部引用

用於裁剪、遮罩和濾鏡的 SVG 可以從外部源載入，只要該源與應用它的 HTML 文件來自同一源。

例如，如果您的 CSS 在一個名為 default.css 的檔案中，它可以看起來像這樣：

css
.target {
  clip-path: url("resources.svg#c1");
}

然後，SVG 透過使用 ID 為 c1 的裁剪路徑，從一個名為 resources.svg 的檔案中匯入。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.