快捷搜索:  汽车  科技

powerbi矩阵图:Power BI Desktop中SVG图标集的引用实践

powerbi矩阵图:Power BI Desktop中SVG图标集的引用实践解码二进制:用Power Query从文件夹导入SVG图标:SVG资源网络上可以找到很多,推荐这个网站的223个应该够用了,这个网站是MIT license可以放心使用。下载图标并解压出svg目录:到这里我们就把准备工作做好了。

我们在做数据可视化的时候,经常会用到图标,SVG可缩放矢量图标是最佳选择,网络中有很多资源,今天我们介绍建立一个SVG图标集,查找和引用这个图标集中的图标。

powerbi矩阵图:Power BI Desktop中SVG图标集的引用实践(1)

SVG小知识:

svg是标签语言,开始与结束要用<svg></svg>标签包裹起来,我们引用现成的图标,所以我们不用系统的学习svg的语法,只需要了解最基本的设置就可以了:

<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M3 0v1h4v5h-4v1h5v-7h-5zm1 2v1h-4v1h4v1l2-1.5-2-1.5z" /> </svg>

我们只需要三个参数:

  • width:图标的宽度,数值是绝对大小,可以相对大小用vh
  • height:图标的高度,数值是绝对大小,可以相对大小用vh
  • fill:图标的填充颜色,可以用英文名称,可以是颜色编码#FD625E

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#FD625E" viewBox="0 0 8 8"> <path d="M3 0v1h4v5h-4v1h5v-7h-5zm1 2v1h-4v1h4v1l2-1.5-2-1.5z" /> </svg>

做了上述修改:这个图标就会是一个80*80的红色的图标。

SVG资源

SVG资源网络上可以找到很多,推荐这个网站的223个应该够用了,这个网站是MIT license可以放心使用。

powerbi矩阵图:Power BI Desktop中SVG图标集的引用实践(2)

下载图标并解压出svg目录:

powerbi矩阵图:Power BI Desktop中SVG图标集的引用实践(3)

到这里我们就把准备工作做好了。

导入SVG图标

用Power Query从文件夹导入SVG图标:

powerbi矩阵图:Power BI Desktop中SVG图标集的引用实践(4)

解码二进制:

powerbi矩阵图:Power BI Desktop中SVG图标集的引用实践(5)

猜您喜欢: