制作动态头像_取网名独一无二的

全栈程序员-站长 • 2022年8月16日下午7:16 • 未分类 • 阅读 8

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

目录

? 头像预览

? SVG语法

? 头像制作

? 制作圆形透明头像

? 图片base64格式

? 头像预览

看一下博主的动态图像，是不是很炫酷，想不想拥有一个？
这是一个 svg 图片，svg 图片不仅可以通过制图软件制作外，其实也可以通过代码进行开发
因为 svg 本质上是一个 xml 文件，是一种标记语言，可以使用编辑器编辑

? SVG语法

svg 语法类似于 html，并且支持 css，浏览器通过读取 css 来渲染动画
svg 主标签内要有 xmlns:xlink="http://www.w3.org/1999/xlink"
svg 标签中的 width/height 来标识画布的大小
viewBox 标签可有可无，有的话前两位一般是0，后两位一般与 width、height 保持一致
g 标签可以用于嵌套，包括嵌套子 svg 文件
添加动画的话在 style 标签中写 css 即可
使用 transform="translate(x y)" 属性，可以移动元素在图片中的位置
image 标签是用来嵌入 png、jpg 等格式类型的图片

<svg width="366" height="366" viewBox="0 0 366 366" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g fill="none" fill-rule="evenodd" width="258" height="258" viewBox="0 0 258 258" transform="translate(54 54)">
        <image xlink:href="url" x="0" y="0" width="200" height="200"/>
    </g>
</svg>