SVG <title>與<desc>

admin發表於2019-02-02
SVG

兩個元素在SVG中起到輔助作用，並不會在渲染的時候顯示，提高程式碼的可訪問性和可讀性。

它們的內容都是文字，兩個元素之間差別不大，title在有些實現中是作為提示資訊出現。

所以title通常放到父元素的第一個位置上，起到標題的作用，而desc則可能會有更多描述。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg測試</title>
<style type="text/css">
svg {
  border:1px solid red;
  width:300px;
  height:300px;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <desc>映象漸變應用程式碼例項</desc>
    <defs>
      <linearGradient id="Gradient01">
        <stop offset="20%" stop-color="#39F" />
        <stop offset="90%" stop-color="#F3F" />
      </linearGradient>
    </defs>
    <rect x="20" y="20" width="200" height="200"
          fill="url(#Gradient01)" />
  </svg>
</body>
</html>

上面程式碼簡單演示了兩個元素的作用，非常簡單不多介紹。

相關文章