警告
本文最后更新于 2020-02-27,文中内容可能已过时。
本文是为了制作的wordpress主题rebirth的logo设置
主题Github: Rebirth-简约优雅响应式WordPress主题
效果图1
效果图2
我们可以看出来,效果就是在页面滑动之后会改变填充色,(并不是所有的svg图片都是,下面就说编辑方法)
1
2
3
4
5
6
7
8
9
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<g style="isolation:isolate">
<g fill="#000000">
这里放置你的 `path` 标签
</g>
</g>
</svg>
|
去阿里icon矢量库,找一个图,并复制svg代码
矢量库图标
1
|
<svg t="1582799138465" class="icon" viewBox="0 0 1267 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23300" width="64" height="64"><path d="M318.82629556 133.78803087C-133.08757287 392.20264631 164.67345974 699.80401596 508.2092303 657.19988601c422.53471382 49.0598287 601.5273088-308.81087989 270.72125986-500.4436034-123.34018755-57.77029413-212.92358917-50.7173058-460.1041946-22.97074138z" fill="#2c2c2c" p-id="23301"></path><path d="M214.90297937 222.368485l54.69674405-224.25466126 103.92331621 177.7631744zM701.6985288 197.75519893l106.65591319-194.16871362 62.89951436 322.70282623zM510.26241218 657.19988601s-16.41051715 257.07071626-51.96414705 281.68151403c-35.55114165 24.61328606 180.49826105 71.10477156 232.45991845 21.87820079 95.3621735-81.27610719-75.53217667-248.9600287-95.71805762-311.76497203-62.38435165-195.77392864-84.77771378 8.20525858-84.77771378 8.20525721z" fill="#2c2c2c" p-id="23302"></path><path d="M687.54526663 901.81463786s148.42632737-11.95573548 201.76423982-119.54740309c53.34040074-107.58917793 20.87276364-193.66101849 32.47012538-227.13409135 11.59487344-33.47307423 67.25474708-167.36287878 201.76423983-90.85512978 134.50949276 76.51023728 122.91461933 188.88021755 62.61580129 217.57248946-60.29632977 28.68978363-166.02644443 25.01147914-97.40291128 0 66.2517982-24.14541025 151.23607471-66.54795404 55.65987362-150.62634235-73.5810334-64.72622317-102.08665291-65.3135569-160.02120218-14.34489113-69.96743372 61.55312413 36.17331813 214.64328419-97.40291126 334.72575757-123.36009791 110.89666592-204.086201 74.11610369-204.08619963 74.11610507z" fill="#2c2c2c" p-id="23303"></path><path d="" fill="#2c2c2c" p-id="23304"></path><path d="" fill="#2c2c2c" p-id="23305"></path><path d="" fill="#2c2c2c" p-id="23306"></path><path d="" fill="#2c2c2c" p-id="23307"></path><path d="" fill="#2c2c2c" p-id="23308"></path></svg>
|
保留所有的 <path></path>
,并去掉 path
里面的 p-id
内容是这样
1
2
3
4
5
6
7
8
9
|
<path d="M318.82629556 133.78803087C-133.08757287 392.20264631 164.67345974 699.80401596 508.2092303 657.19988601c422.53471382 49.0598287 601.5273088-308.81087989 270.72125986-500.4436034-123.34018755-57.77029413-212.92358917-50.7173058-460.1041946-22.97074138z" fill="#2c2c2c">
</path>
<path d="M214.90297937 222.368485l54.69674405-224.25466126 103.92331621 177.7631744zM701.6985288 197.75519893l106.65591319-194.16871362 62.89951436 322.70282623zM510.26241218 657.19988601s-16.41051715 257.07071626-51.96414705 281.68151403c-35.55114165 24.61328606 180.49826105 71.10477156 232.45991845 21.87820079 95.3621735-81.27610719-75.53217667-248.9600287-95.71805762-311.76497203-62.38435165-195.77392864-84.77771378 8.20525858-84.77771378 8.20525721z" fill="#2c2c2c">
</path>
<path d="M687.54526663 901.81463786s148.42632737-11.95573548 201.76423982-119.54740309c53.34040074-107.58917793 20.87276364-193.66101849 32.47012538-227.13409135 11.59487344-33.47307423 67.25474708-167.36287878 201.76423983-90.85512978 134.50949276 76.51023728 122.91461933 188.88021755 62.61580129 217.57248946-60.29632977 28.68978363-166.02644443 25.01147914-97.40291128 0 66.2517982-24.14541025 151.23607471-66.54795404 55.65987362-150.62634235-73.5810334-64.72622317-102.08665291-65.3135569-160.02120218-14.34489113-69.96743372 61.55312413 36.17331813 214.64328419-97.40291126 334.72575757-123.36009791 110.89666592-204.086201 74.11610369-204.08619963 74.11610507z" fill="#2c2c2c"></path>
<path d="" fill="#2c2c2c">
</path>
<path d="" fill="#2c2c2c"></path><path d="" fill="#2c2c2c"></path>
<path d="" fill="#2c2c2c"></path><path d="" fill="#2c2c2c"></path>
|
将这段代码全部复制到上面那个代码块中就好了。