随笔分类 - svg
可缩放矢量图形，是一种用于描述二维的矢量图形，基于 XML 的标记语言。
摘要：nuxt3引入svg的方法和viet的差不多，只是细节上有些不同 同样是两步，引入svg组件和引入svg文件 第一步：引入svg组件 在components文件夹下创建SvgIcon.vue组件 <template> <svg class="svgclass" aria-hidden="true">
阅读全文
摘要：1、需求：最近在弄一个实时定位的展示模块，就是说前端通过webSocket获取到用户位置信息：实时展示在图上，还会有图文提示等 2、思路：这个有两种解决方案：1、canvas来处理。2、svg来处理 一开始不知道哪个解决方案好，就做了两个demo探探水 总体来说：如果交互并不多的话推荐canvas处
阅读全文
摘要：1、需求：看别人的背景图经常有那些飘动的图案，看起来就很美观，要怎么实现呢 2、实现： 在svg要实现动画要用到两个元素：<animateMotion>和<animateTransform>元素 <animateMotion>元素的作用是使元素沿着动作路径移动 <animateTransform>元
阅读全文
摘要：1、问题：拿到一个线性svg，想在这个基础上弄一个如下图所示的深色版本，但是发现里面的弧形小三角会被填充，通过先后顺序调整层级表面后表面看起来是正常的，但实际还是会被填充 想要结果 出现的结果 2、原因：svg绘制的图会根据fill-rule规则不同而展示不同的结果：下面有一个例子 <svg wid
阅读全文
摘要：1、先在src\assets路径下创建icons文件夹，在里面再建一个svg文件夹，并导入svg文件 2、在src\components里创建一个svg组件svgIcon.vue <template> <svg :class="svgClass" aria-hidden="true" v-on="$
阅读全文
