媒體

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

media 屬性指定了一個媒體查詢，樣式表必須匹配此查詢才能應用。

你可以將此屬性與以下 SVG 元素一起使用

<style>

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: black;
    }
  </style>
  <style media="(width >= 600px)">
    rect {
      fill: seagreen;
    }
  </style>

  <text y="15">Resize the window to see the effect</text>
  <rect y="20" width="200" height="200" />
</svg>

用法說明

值	`<media-query-list>`
預設值	`all`
可動畫的	否

<media-query-list>

此值包含一個媒體查詢，樣式表必須匹配此查詢才能被應用。

如果未指定，樣式表將無條件應用。

規範

規範
Scalable Vector Graphics (SVG) 2 # StyleElementMediaAttribute

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年7月1日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題