Svg图标删除掩码并使用标记
Svg图标删除掩码并使用标记
提问于 2018-03-06 11:05:12
我正在从我的设计师那里得到svgs图标，看起来如下所示：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>icons/Search</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M19.9540595,19.3616366 L15.8890991,15.2679046 C18.3035819,12.5133747 18.0987254,8.33903567 15.4261496,5.83443006 C12.7535738,3.32982445 8.57707245,3.39817204 5.98778844,5.98888691 C3.39850443,8.57960179 3.33019459,12.7584111 5.8334169,15.4324638 C8.33663921,18.1065165 12.5086727,18.3114862 15.2616813,15.8956692 L19.3619892,19.9540341 C19.5318715,20.0382483 19.7365147,20.0046375 19.8705748,19.8705033 C20.0046349,19.7363691 20.0382272,19.5316129 19.9540595,19.3616366 Z M10.7813881,16.7091105 C7.53099588,16.7091105 4.8960324,14.0726909 4.8960324,10.8205025 C4.8960324,7.56831416 7.53099588,4.93189457 10.7813881,4.93189457 C14.0317802,4.93189457 16.6667437,7.56831416 16.6667437,10.8205025 C16.6571029,14.0520297 14.0464342,16.6720327 10.8167355,16.691427 L10.7813881,16.7091105 Z" id="path-1"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-704.000000, -382.000000)">
<g id="icons/Search" transform="translate(700.000000, 378.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<use id="Search" fill="#9CA0A0" fill-rule="evenodd" xlink:href="#path-1"/>
<g id="mixin/primary-300" mask="url(#mask-2)" fill="#9CA0A0" fill-rule="evenodd">
<g transform="translate(-3.000000, -3.000000)" id="Rectangle-6">
<rect x="0" y="0" width="30" height="30" rx="2"/>
</g>
</g>
</g>
</g>
</g>
</svg>问题是，use和mask标记使用的id并不是唯一的，可以在我获得的另一个SVG中相同。
有办法把这个弄平还是怎么的？我没有这方面的知识，所以我需要你的帮助。(或自动工具)
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-06 13:32:33
下面是一个deduping ids函数。
备注：相当激进，因为它将完全删除需要id替换的<svg>内部元素上的任何绑定事件，因为我将它们的outerHTML视为字符串，在需要时替换id，并用结果字符串替换<svg>的整个outerHTML。将事件绑定在<svg>内部标记上是不寻常的，也是非常罕见的，但也并非不可能，因此我提出警告。我也有点懒，用jQuery写的，至少对我来说，这需要更多的香草味。
function dedupeIDs() {
let allSVGs = $('svg'),
allIDs = [];
allSVGs.each((i, e) => {
let outer = e.outerHTML;
$('[id]', e).each((o, k) => {
let unique = k.id;
if (allIDs.indexOf(k.id) > -1) {
unique = createUniqueId(k.id, allIDs);
outer = outer.replace('"#' + k.id + '"', '"#' + unique + '"')
.replace('"' + k.id + '"', '"' + unique + '"');
}
allIDs.push(unique);
})
if (e.outerHTML !== outer) {
e.outerHTML = outer;
};
})
function createUniqueId(id, ids) {
let i = 0;
while (++i && ids.indexOf(id.replace(/\d+/g, '') + i) > -1);
return id.replace(/\d+/g, '') + i;
}
}
$(window).load(dedupeIDs);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>icons/Search</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M19.9540595,19.3616366 L15.8890991,15.2679046 C18.3035819,12.5133747 18.0987254,8.33903567 15.4261496,5.83443006 C12.7535738,3.32982445 8.57707245,3.39817204 5.98778844,5.98888691 C3.39850443,8.57960179 3.33019459,12.7584111 5.8334169,15.4324638 C8.33663921,18.1065165 12.5086727,18.3114862 15.2616813,15.8956692 L19.3619892,19.9540341 C19.5318715,20.0382483 19.7365147,20.0046375 19.8705748,19.8705033 C20.0046349,19.7363691 20.0382272,19.5316129 19.9540595,19.3616366 Z M10.7813881,16.7091105 C7.53099588,16.7091105 4.8960324,14.0726909 4.8960324,10.8205025 C4.8960324,7.56831416 7.53099588,4.93189457 10.7813881,4.93189457 C14.0317802,4.93189457 16.6667437,7.56831416 16.6667437,10.8205025 C16.6571029,14.0520297 14.0464342,16.6720327 10.8167355,16.691427 L10.7813881,16.7091105 Z" id="path-1"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-704.000000, -382.000000)">
<g id="icons/Search" transform="translate(700.000000, 378.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<use id="Search" fill="#9CA0A0" fill-rule="evenodd" xlink:href="#path-1"/>
<g id="mixin/primary-300" mask="url(#mask-2)" fill="#9CA0A0" fill-rule="evenodd">
<g transform="translate(-3.000000, -3.000000)" id="Rectangle-6">
<rect x="0" y="0" width="30" height="30" rx="2"/>
</g>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>icons/Search</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M19.9540595,19.3616366 L15.8890991,15.2679046 C18.3035819,12.5133747 18.0987254,8.33903567 15.4261496,5.83443006 C12.7535738,3.32982445 8.57707245,3.39817204 5.98778844,5.98888691 C3.39850443,8.57960179 3.33019459,12.7584111 5.8334169,15.4324638 C8.33663921,18.1065165 12.5086727,18.3114862 15.2616813,15.8956692 L19.3619892,19.9540341 C19.5318715,20.0382483 19.7365147,20.0046375 19.8705748,19.8705033 C20.0046349,19.7363691 20.0382272,19.5316129 19.9540595,19.3616366 Z M10.7813881,16.7091105 C7.53099588,16.7091105 4.8960324,14.0726909 4.8960324,10.8205025 C4.8960324,7.56831416 7.53099588,4.93189457 10.7813881,4.93189457 C14.0317802,4.93189457 16.6667437,7.56831416 16.6667437,10.8205025 C16.6571029,14.0520297 14.0464342,16.6720327 10.8167355,16.691427 L10.7813881,16.7091105 Z" id="path-1"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-704.000000, -382.000000)">
<g id="icons/Search" transform="translate(700.000000, 378.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<use id="Search" fill="#9CA0A0" fill-rule="evenodd" xlink:href="#path-1"/>
<g id="mixin/primary-300" mask="url(#mask-2)" fill="#9CA0A0" fill-rule="evenodd">
<g transform="translate(-3.000000, -3.000000)" id="Rectangle-6">
<rect x="0" y="0" width="30" height="30" rx="2"/>
</g>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>icons/Search</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M19.9540595,19.3616366 L15.8890991,15.2679046 C18.3035819,12.5133747 18.0987254,8.33903567 15.4261496,5.83443006 C12.7535738,3.32982445 8.57707245,3.39817204 5.98778844,5.98888691 C3.39850443,8.57960179 3.33019459,12.7584111 5.8334169,15.4324638 C8.33663921,18.1065165 12.5086727,18.3114862 15.2616813,15.8956692 L19.3619892,19.9540341 C19.5318715,20.0382483 19.7365147,20.0046375 19.8705748,19.8705033 C20.0046349,19.7363691 20.0382272,19.5316129 19.9540595,19.3616366 Z M10.7813881,16.7091105 C7.53099588,16.7091105 4.8960324,14.0726909 4.8960324,10.8205025 C4.8960324,7.56831416 7.53099588,4.93189457 10.7813881,4.93189457 C14.0317802,4.93189457 16.6667437,7.56831416 16.6667437,10.8205025 C16.6571029,14.0520297 14.0464342,16.6720327 10.8167355,16.691427 L10.7813881,16.7091105 Z" id="path-1"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-704.000000, -382.000000)">
<g id="icons/Search" transform="translate(700.000000, 378.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<use id="Search" fill="#9CA0A0" fill-rule="evenodd" xlink:href="#path-1"/>
<g id="mixin/primary-300" mask="url(#mask-2)" fill="#9CA0A0" fill-rule="evenodd">
<g transform="translate(-3.000000, -3.000000)" id="Rectangle-6">
<rect x="0" y="0" width="30" height="30" rx="2"/>
</g>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>icons/Search</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M19.9540595,19.3616366 L15.8890991,15.2679046 C18.3035819,12.5133747 18.0987254,8.33903567 15.4261496,5.83443006 C12.7535738,3.32982445 8.57707245,3.39817204 5.98778844,5.98888691 C3.39850443,8.57960179 3.33019459,12.7584111 5.8334169,15.4324638 C8.33663921,18.1065165 12.5086727,18.3114862 15.2616813,15.8956692 L19.3619892,19.9540341 C19.5318715,20.0382483 19.7365147,20.0046375 19.8705748,19.8705033 C20.0046349,19.7363691 20.0382272,19.5316129 19.9540595,19.3616366 Z M10.7813881,16.7091105 C7.53099588,16.7091105 4.8960324,14.0726909 4.8960324,10.8205025 C4.8960324,7.56831416 7.53099588,4.93189457 10.7813881,4.93189457 C14.0317802,4.93189457 16.6667437,7.56831416 16.6667437,10.8205025 C16.6571029,14.0520297 14.0464342,16.6720327 10.8167355,16.691427 L10.7813881,16.7091105 Z" id="path-1"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-704.000000, -382.000000)">
<g id="icons/Search" transform="translate(700.000000, 378.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<use id="Search" fill="#9CA0A0" fill-rule="evenodd" xlink:href="#path-1"/>
<g id="mixin/primary-300" mask="url(#mask-2)" fill="#9CA0A0" fill-rule="evenodd">
<g transform="translate(-3.000000, -3.000000)" id="Rectangle-6">
<rect x="0" y="0" width="30" height="30" rx="2"/>
</g>
</g>
</g>
</g>
</g>
</svg>
个人和主观备注：我的意思是它更像是概念的证明，我个人不会在生产环境中使用它。如果必须的话，我宁愿只运行一次代码，并且手动地将来自页面源代码的每个<svg>的结果放在源代码中，这样我就可以在不需要运行dedupe函数的情况下拥有唯一的id了。
Stack Overflow用户
发布于 2018-07-14 14:59:00
尝试使用我制作的名为斯夫古德的npm包。它移除defs和g(它们倾向于包含mask_s)元素，并将_path元素浮动到svg的顶层。完成此操作后，您可以将样式和转换直接应用到svg中，这比使用掩码时容易得多，并给了您更多的控制。我有一些使它更有用的计划，但是如果我能添加一些可以使它更适合您的用例的话，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49129309
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号