将svg中多个path合并成单个path

摘要:
保留原本的属性,按照颠倒的顺序将第一个元素的d属性添加到第二个元素的d属性之前,用空格分隔若第一个path为˂pathd="M972.810838298.631144c-122.73839-122.73839-285.936809-190.342764-459.524787-190.342765-173.5807520-336.77917267.59715-459.524787190.342765

保留原本的属性,按照颠倒的顺序将第一个元素的d属性添加到第二个元素的d属性之前,用空格分隔

若第一个path为

  <path d="M972.810838 298.631144c-122.73839-122.73839-285.936809-190.342764-459.524787-190.342765-173.580752 0-336.779172 67.59715-459.524787 190.342765a43.342807 43.342807 0 0 0 30.655698 73.998504 43.248882 43.248882 0 0 0 30.655697-12.694334c106.366528-106.366528 247.781556-164.946871 398.206167-164.946871s291.854089 58.580343 398.220617 164.946871a43.350032 43.350032 0 0 0 61.311395-61.30417z" fill="" p-id="2608"></path>

第二个为

  <path d="M513.286051 345.803203c-121.365639 0-235.462922 47.265985-321.281535 133.077373a43.342807 43.342807 0 0 0 0.007225 61.30417c8.460481 8.467706 19.558089 12.701559 30.648472 12.701559s22.187991-4.233853 30.655698-12.701559c69.432301-69.439526 161.760643-107.681479 259.962915-107.681479 98.209497 0 190.53784 38.241953 259.977365 107.681479a43.328357 43.328357 0 0 0 61.296945 0 43.335582 43.335582 0 0 0 0-61.30417c-85.796938-85.818613-199.901446-133.077372-321.267085-133.077373zM327.59619 659.614083a43.350032 43.350032 0 0 0 61.296945 61.30417c68.5942-68.586975 180.184407-68.586975 248.785832 0a43.219982 43.219982 0 0 0 30.648472 12.694334 43.335582 43.335582 0 0 0 30.648473-73.998504c-102.392775-102.392775-268.986947-102.392775-371.379722 0zM513.286051 823.036478a43.342807 43.342807 0 0 0-35.445876 73.752854c9.768207 9.760982 22.614267 14.645086 35.445876 14.645086s25.677669-4.884104 35.445876-14.645086a43.342807 43.342807 0 0 0-35.445876-73.752854z" fill="" p-id="2609"></path>

合并后

  <path  d="M972.810838 298.631144c-122.73839-122.73839-285.936809-190.342764-459.524787-190.342765-173.580752 0-336.779172 67.59715-459.524787 190.342765a43.342807 43.342807 0 0 0 30.655698 73.998504 43.248882 43.248882 0 0 0 30.655697-12.694334c106.366528-106.366528 247.781556-164.946871 398.206167-164.946871s291.854089 58.580343 398.220617 164.946871a43.350032 43.350032 0 0 0 61.311395-61.30417z M513.286051 345.803203c-121.365639 0-235.462922 47.265985-321.281535 133.077373a43.342807 43.342807 0 0 0 0.007225 61.30417c8.460481 8.467706 19.558089 12.701559 30.648472 12.701559s22.187991-4.233853 30.655698-12.701559c69.432301-69.439526 161.760643-107.681479 259.962915-107.681479 98.209497 0 190.53784 38.241953 259.977365 107.681479a43.328357 43.328357 0 0 0 61.296945 0 43.335582 43.335582 0 0 0 0-61.30417c-85.796938-85.818613-199.901446-133.077372-321.267085-133.077373zM327.59619 659.614083a43.350032 43.350032 0 0 0 61.296945 61.30417c68.5942-68.586975 180.184407-68.586975 248.785832 0a43.219982 43.219982 0 0 0 30.648472 12.694334 43.335582 43.335582 0 0 0 30.648473-73.998504c-102.392775-102.392775-268.986947-102.392775-371.379722 0zM513.286051 823.036478a43.342807 43.342807 0 0 0-35.445876 73.752854c9.768207 9.760982 22.614267 14.645086 35.445876 14.645086s25.677669-4.884104 35.445876-14.645086a43.342807 43.342807 0 0 0-35.445876-73.752854z" fill="" p-id="2609"></path>

免责声明:文章转载自《将svg中多个path合并成单个path》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇多线程和异步委托基础详解jdbc.properties文件中的配置需要加上" jdbc."的前缀org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

使用css将网页变成黑白色

其实将整个网页全局变色,无非就是三种,css直接设置,添加svg滤镜,通过js遍历所有标签更改颜色,于是 1、css 直接编辑样式,然后在需要应用的地方设置class 1 .gray { 2 -webkit-filter: grayscale(100%); 3 -moz-filter: grayscale(100%); 4 -ms...

SVG素材整理(原)

why SVG? 1.矢量的国际图形标准,以后随着浏览器的发展,相信矢量会更多的出现 2.illustartor等多数矢量绘图软件可以导出为这种格式 so SVG现状 基本介绍:http://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91%E9%87%8F%E5%9C%96%E5%BD...

SVG图形引用、裁切、蒙版

SVG图形引用、裁切、蒙版,使用三个标签: 1. <use>标签创建图形引用 2. <clipPath>标签裁切图形 3. <mask>标签创建蒙版  <use>标签 <use>标签使用URI引用一个<g>,<svg>或其他具有一个唯一的ID属性和重复的图形元素...

[Vuejs] svg-sprite-loader实现加载svg自定义组件

1、安装 svg-sprite-loader npm install svg-sprite-loader -D 或者 npm install svg-sprite-loader --save-dev 2、将所有svg图片放到assets/svg下,以此为例,修改文件 build/webpack.base.conf.js 找到代码: { test: /....

CSS躬行记(8)——裁剪和遮罩

一、 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现。注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留。裁剪最早是在CSS 2.1时代由clip属性引入,但该属性只能应用于绝对定位的元素,并且只能裁剪成矩形。CSS3提供了强大的clip-path属性,突破了clip属性的...

SVG技术入门:线条动画实现原理

相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。 其实我没有什么好增...