以 Echarts 的官方实例为例:pictorialBar-velocity
如果想替换其中的图形呢?
- 替换 symbols 的代码即可
这里重点讲一下如何获取到 SVG_Path:
1. 将 SVG 图上传 iconfont,或在线找到适合的 icon,点击下载,然后选择复制 SVG
2. 打开一个 HTML 文件,粘贴:
<svg t="1585045103126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1277" width="200" height="200">
<path d="M486.4 630.4c-19.2 19.2-48 19.2-67.2 3.2l-137.6-131.2-32 35.2 137.6 131.2c38.4 35.2 96 35.2 134.4-3.2l281.6-297.6-35.2-32L486.4 630.4z" p-id="1278"></path>
<path
d="M512 51.2c-252.8 0-460.8 204.8-460.8 460.8s204.8 460.8 460.8 460.8 460.8-204.8 460.8-460.8S764.8 51.2 512 51.2zM512 924.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S739.2 924.8 512 924.8z"
p-id="1279"
></path>
</svg>
3. 复制 path
标签内的 d
属性的值,如果有多个,则拼接到一起,然后粘贴替换 symbols 里面的路径,也就 path://M512 51.2c-252.8 0-460.8 204.8-460.8 460.8s204.8 460.8 460.8 460.8 460.8-204.8 460.8-460.8S764.8 51.2 512 51.2zM512 924.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S739.2 924.8 512 924.8zM486.4 630.4c-19.2 19.2-48 19.2-67.2 3.2l-137.6-131.2-32 35.2 137.6 131.2c38.4 35.2 96 35.2 134.4-3.2l281.6-297.6-35.2-32L486.4 630.4z
效果图:
网友评论