svg 的文章 - SegmentFault 思否

11

手动实现一个速度仪表盘

火星田园犬 23 小时前发布于
6 收藏

最近正在学习数据可视化, 这里记录一下一些心得与成果, 采用的技术是 (svg + react + d3)。这种实现可视化方式本人个人感觉超级不错，如果你是有一定的基础的同学，强烈推荐一下。

0

svg animation应用之-描边效果

chidaozhi 2月6日发布于
收藏

stroke-linejoin 表示描边转角的表现方式 miter, round, bevel, inherit

3

svg animation动画应用

chidaozhi 2月4日发布于
2 收藏

最近在做首页动画的时候，引入有背景色的mp4动图时，动图的背景色不能很好的融入相同背景色的不同浏览器和不同显示器，出现了下图这种尴尬的情况：

6

对SVG动画进行惰性异步光栅化处理

疯狂的技术宅 1月30日发布于
5 收藏

在转换 SVG 图像时，浏览器会试着在每一帧上进行渲染，以便使图像尽可能的清晰。不幸的是，SVG渲染可能会很慢，特别是对于较大的图像。

73

一步步教你用HTML5 SVG实现动画效果

疯狂的技术宅 1月22日发布于
56 收藏

摘要在这篇文章中你将了解Awwwards网是怎样实现动画的。本文介绍了HTML5 SVG中的circle 元素，它的stroke属性，以及如何使用CSS变量以及用 Vanilla JavaScript 为它们设置动画。

0

使用SVG+React实现飞行仪表仿真

6gallon 1月21日发布于
收藏

SVG+React实现演示地址：[链接]

9

vue-cli3使用svg问题的简单解决办法

coder94 1月13日发布于
5 收藏

此解决办法使用的是 vue-cli 插件 vue-cli-plugin-svg-sprite 效果如下：那个朋友圈图标就是我从网上找的svg图片使用方式如下： {代码...} vue.config.js添加配置，在文件内最下方找到pluginOptions {代码...} ...

0

Vue2学习之旅五：添加数据可视化支持

心叶 1月1日发布于
收藏

作者：心叶时间：2019-01-01 09:33 安装 {代码...} 首先，通过npm安装数据可视化库clay.js，具体的api你可以查阅文档： [链接] 这是一个非嵌入的库（这是绘图的核心库，针对2d或3d，再导入对应的库即可）。初始...

1

svg压缩

LazyHua 2018年12月28日发布于
收藏

这是个通过借助npm包的一种方式去压缩svg的图片，由于阿里的图库自己创建的图标有大小的限制，当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩。1、下载node.js （地址：[链接]）2、下...

2

vue使用icon图标：svg-sprite-loader

someone 2018年12月28日发布于
1 收藏

每次在项目中使用icon的图标时，总是觉得引入很长的路径很麻烦，或许需要将它们写成一个个伪元素。最近发现了svg-sprite-loader可以解决你的烦恼。

4

webpack自动用svg生成iconfont字体图标，支持热重载

okfine 2018年12月22日发布于
3 收藏

之前生成iconfont字体图标，是用的[链接] 或者是阿里的[链接] ，将UI给的svg图导入来生成。但是一直有个问题，假如需要再次加入几个图标时，又需要重新搞一遍，很麻烦。

13

自己动手实现一个html2canvas

noahlam 2018年12月15日发布于
10 收藏

大概就是利用 svg 的 foreignObject 标签, 嵌入 dom, 最后再利用 canvas 绘制 svg. 从而实现最终目的.

2

数据可视化之clay:设计思想和建立初衷

心叶 2018年11月23日发布于
1 收藏

随着大数据的发展和数据本身在日常生活中日益增长的价值，以更加友好的方式把数据呈现给用户显得越来越重要，而其中，可交互的图表目前看来会是一个不错的选择。

0

svg两端交汇动效

chenyunqing 2018年11月19日发布于
收藏

HTML: {代码...} LESS: {代码...}

1

clay教程二之布局的使用

心叶 2018年11月06日发布于
1 收藏

在绘制一些常见图形的时候，比如关系图，单个结点或连线并不难，麻烦的是位置的计算等，和图形模块不同，布局就是专门计算一些特殊图形位置的模块，用一句通俗的话说就是：决定什么元素绘制在哪里。因此，布局应...