svg08——＜use＞&＜defs＞標籤建立圖形引用

smile1213發表於2021-12-03
SVG
在 js中，當我們需要重複使用一個欄位，會將它定義為一個變數，在多個地方使用
在svg中，當我們需要重複使用一個圖形時，要怎麼處理呢？

一、通過＜use＞&＜defs＞標籤，在html中直接使用

使用方式：

  • 將圖形等放在 <defs> 中提前定義好，並設定 id（defs中可設定多個）
  • 用 <use> 標籤的 xlink:href 屬性指定對應的 id
  • 注意，defs 中的內容並不會直接渲染，在使用時才會渲染
<svg>
  <defs>
    <polygon id="star" points="0 0 50 0 25 50" fill="blue" transform="scale(1)"></polygon>
    <!-- 多個平鋪 -->
    <polygon id="test"></polygon>
  </defs>
  
  <use xlink:href="#star"></use>
</svg>

在這裡插入圖片描述

二、也可以在js中生成引用，來看例項

前面03篇講到，可以用js建立svg，同樣的use也可以用js建立。直接來看一個綜合例項
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>use標籤的使用</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #001122;
            /* svg標籤是內聯元素，撐滿了會有滾動條出來，不想要這個滾動條所以需要重置這兩個值 */
            line-height: 0;
            font-size: 0;
        }
    </style>
</head>
<body>
    <svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice">
        <defs>
            <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon>
        </defs>
        <!-- 星星 -->
        <g id="star-group"></g>
    </svg>
   
</body>


<script>
    // nameSpace
    var SVG_NS = 'http://www.w3.org/2000/svg'
    var XLINK_NS = 'http://www.w3.org/1999/xlink'


    var paper = document.querySelector('svg')


    renderStar()


    // 通過一個已有元素，生成它的引用: <use xlink:href="#star"></use>
    function use(origin) {
        var _use = document.createElementNS(SVG_NS, 'use')
        _use.setAttributeNS(XLINK_NS, 'xlink:href', '#' + origin.id)
        return _use
    }


    // 獲得任意兩個數 之間的 隨機數
    function random (min, max) {
        return min + (max - min) * Math.random()
    }

    // 渲染星空
    function renderStar () {
        var starRef = document.getElementById('star')
        var starGroup = document.getElementById('star-group')
        var starCount = 500


        var star
        while( starCount -- ) {
            // 生成star的引用
            star = use(starRef)
            // 設定透明度
            star.setAttribute('opacity', `${random(0.1, 0.5)}`)
            // 設定transform值（translate、scale之間無分號）
            // polygon內部如果使用transform，會在父級use變換的基礎上，繼續進行變換（沒有覆蓋，只是繼續進行）
            star.setAttribute('transform', `translate(${random(-400, 400)}, ${random(-300, 300)})scale(${random(0.1, 0.5)})`)
            // 追加進去
            starGroup.appendChild(star)
        }


    }
</script>
</html>
這樣我們就得到了一個星空~

在這裡插入圖片描述

三、defs的其他用法

defs中除了可以定義圖形，也可以定義 漸變效果 ，只是使用時就不通過use了

我們下一篇一起來學習 漸變

相關文章