08——＜use＞&＜defs＞标签创建图形引用

Unique·Blue

已于 2023-05-15 18:29:33 修改

阅读量1.5k

点赞数 2

分类专栏： SVG 文章标签： javascript js svg

于 2021-11-29 16:00:06 首次发布

本文链接：https://blog.csdn.net/weixin_42289080/article/details/121611519

版权

SVG 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

在 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了

后面我们一起来学习 渐变

Unique·Blue

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
08——＜use＞&＜defs＞标签创建图形引用

在 js中，当我们需要重复使用一个字段，会将它定义为一个变量，在多个地方使用在svg中，当我们需要重复使用一个图形时，要怎么处理呢？一、在html中直接使用使用方式：将图形等放在 <defs> 中提前定义好，并设置 id（defs中可设置多个）用 <use> 标签的 xlink:href 属性指定对应的 id<svg> <defs> <polygon id="star" points="0 0 50 0 25 50" fi.
复制链接

扫一扫