<svg>

svg 元素是一個容器，它定義了一個新的座標系和視窗。它用作 SVG 文件的最外層元素，但它也可以用來將 SVG 片段嵌入到 SVG 或 HTML 文件中。

注意： xmlns 屬性僅在SVG 文件的最外層 svg 元素上，或在使用 XML 序列化方式的 HTML 文件中才需要。對於內部 svg 元素或使用 HTML 序列化方式的 HTML 文件，它是多餘的。

示例

巢狀 `svg` 元素

此示例顯示巢狀的 svg 元素不需要 xmlns 屬性。

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

html

<svg
  viewBox="0 0 300 100"
  xmlns="http://www.w3.org/2000/svg"
  stroke="red"
  fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

使用動態視窗單位

在此示例中，svg 元素上的 height 和 width 屬性使用動態視窗值 60vmin 設定，它相當於視窗寬度或高度的 60%，取較小的值。

<div class="resizer">
  <iframe
    class="resized"
    srcdoc="

html

<svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='60vmin' width='60vmin'>
  <rect x='0' y='0' width='50%' height='50%' fill='tomato' opacity='0.75' />
  <rect x='25%' y='25%' width='50%' height='50%' fill='slategrey' opacity='0.75' />
  <rect x='50%' y='50%' width='50%' height='50%' fill='olive' opacity='0.75' />
  <rect x='0' y='0' width='100%' height='100%' stroke='cadetblue' stroke-width='0.5%' fill='none' />
</svg>

  "></iframe>
</div>

.resizer {
  display: flex;
  margin: 1rem;
  padding: 0;
  resize: both;
  overflow: hidden;
  border: 5px dotted red;
  height: 400px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

要更改 iframe 的尺寸，請嘗試從右下角調整帶點紅邊的尺寸。

屬性

baseProfile 已棄用: 文件所需的最小 SVG 語言配置檔案。值型別: <string> ; 預設值: 無；可動畫: 否
height: 矩形視窗的顯示高度。（不是其座標系的高度。）值型別: <length>|<percentage> ; 預設值: auto；可動畫: 是
preserveAspectRatio: 如果 svg 片段以不同的縱橫比顯示，它必須如何變形。值型別: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; 預設值: xMidYMid meet；可動畫: 是
version 已棄用: 用於元素內部內容的 SVG 版本。值型別: <number> ; 預設值: 無；可動畫: 否
viewBox: 當前 SVG 片段的 SVG 視窗座標。值型別: <list-of-numbers> ; 預設值: 無；可動畫: 是
width: 矩形視窗的顯示寬度。（不是其座標系的寬度。）值型別: <length>|<percentage> ; 預設值: auto；可動畫: 是
x: svg 容器的顯示 x 座標。對最外層 svg 元素沒有影響。值型別: <length>|<percentage> ; 預設值: 0；可動畫: 是
y: svg 容器的顯示 y 座標。對最外層 svg 元素沒有影響。值型別: <length>|<percentage> ; 預設值: 0；可動畫: 是

注意： 從 SVG2 開始，x、y、width 和 height 是幾何屬性，這意味著這些屬性也可以用作 CSS 屬性。

使用環境

類別	容器元素、結構元素
允許的內容	以下任何元素，按任何順序動畫元素描述性元素形狀元素結構元素漸變元素 `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

規範

規範
可縮放向量圖形 (SVG) 2 # 新建文件

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

示例

巢狀 svg 元素

使用動態視窗單位

屬性

使用環境

規範

瀏覽器相容性

巢狀 `svg` 元素