svg - 如何从 SVG 图像中删除所有颜色?
问题描述
我有这个 SVG 图像,我需要擦除“所有”颜色,包括前面、背心和腹部的白光,只看到轮廓的图像。我需要它干净才能在我正在制作的导航栏项目上使用。这是我需要编辑的图像
解决方案
您可以使用过滤器:
- 把你的图像变成灰度:
<feColorMatrix type="matrix"
values="0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0 0 0 1 0"/>
- 然后使用离散颜色转换将黑色像素变为黑色,将其他所有像素变为白色:
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
<feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
<feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
</feComponentTransfer>
- 然后将所有这些反转以使轮廓为白色,其他所有内容为黑色:
<feColorMatrix type="matrix" values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0"/>
- 最后,从这个过滤后的图像创建一个蒙版并将其应用于您的图像。
<mask id="mask" viewBox="0 0 150 206">
<rect width="150" height="206" fill="black"/>
<g filter="url(#nocolor_inv)">
<!-- your image here -->
<circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
</g>
</mask>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<filter id="nocolor_inv" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feColorMatrix type="matrix"
values="0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0 0 0 1 0"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
<feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
<feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
</feComponentTransfer>
<feColorMatrix type="matrix" values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0"/>
</filter>
<mask id="mask" viewBox="0 0 150 206">
<rect width="150" height="206" fill="black"/>
<g filter="url(#nocolor_inv)">
<!-- your image here -->
<circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
</g>
</mask>
<g mask="url(#mask)">
<!-- your image here -->
<circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
</g>
</svg>
推荐阅读
- javascript - 在javascript中将时间范围按其他时间范围分割成片段
- r - 如何在 r 中使用 ggplot 在 x 轴上区分样本
- javascript - JavaScript 只打印数组的最后一个元素
- ansible - Ansible - 将变量从角色/任务返回到剧本
- r - 如何在 Windows 上从 R 启动 Spark 集群的主节点?
- go - 从同一个项目中导入包
- google-app-maker - 基于关系的列表小计
- c# - 尝试创建自定义面板
- c - C 串行通信。WriteFile 成功,但我的设备只处理第一个字符
- javascript - 在 return() 中使用 .map 导入组件