Javascript Svg图标移除掩码并使用标记
我从我的设计师那里得到的SVG图标如下所示:Javascript Svg图标移除掩码并使用标记,javascript,css,svg,Javascript,Css,Svg,我从我的设计师那里得到的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/ske
<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中可能是相同的
有办法把这个弄平还是怎么的?我没有这方面的知识,所以我需要你的帮助。(或自动工具)这里有一个重复数据消除ids功能 注意:它相当具有攻击性,因为它将完全删除
s的内部元素上需要id
替换的所有绑定事件,因为我将它们的outerHTML
视为一个字符串,在需要时替换id
s,并用结果字符串替换
的整个outerHTML
。将事件绑定到
内部标记上是不寻常的,也是非常罕见的,但并非不可能,因此我提出警告。我也有点懒,用jQuery写的,因为至少对我来说,用香草会花更多的时间
函数dedupeIDs(){
让allSVGs=$('svg'),
allIDs=[];
所有SVG.每个((i,e)=>{
let outer=e.outerHTML;
$(“[id]”,e)。每个((o,k)=>{
让unique=k.id;
if(所有索引(k.id)>-1){
unique=createUniqueId(k.id,allid);
outer=outer.replace(“#”+k.id+”,“#”+unique+”)
.replace(““'+k.id+”,“'+unique+”);
}
allIDs.push(唯一);
})
如果(例如,外部TML!==外部){
e、 outerHTML=外部;
};
})
函数createUniqueId(id,id){
设i=0;
而(++i&&id.indexOf(id.replace(/\d+/g,)+i)>-1);
返回id.replace(/\d+/g',)+i;
}
}
$(窗口)。加载(重复数据)代码>
图标/搜索
用草图创建。
图标/搜索
用草图创建。
图标/搜索
用草图创建。
图标/搜索
用草图创建。
这里有一个重复数据消除ids功能
注意:它相当具有攻击性,因为它将完全删除
s的内部元素上需要id
替换的所有绑定事件,因为我将它们的outerHTML
视为一个字符串,在需要时替换id
s,并用结果字符串替换
的整个outerHTML
。将事件绑定到
内部标记上是不寻常的,也是非常罕见的,但并非不可能,因此我提出警告。我也有点懒,用jQuery写的,因为至少对我来说,用香草会花更多的时间
函数dedupeIDs(){
让allSVGs=$('svg'),
allIDs=[];
所有SVG.每个((i,e)=>{
let outer=e.outerHTML;
$(“[id]”,e)。每个((o,k)=>{
让unique=k.id;
if(所有索引(k.id)>-1){
unique=createUniqueId(k.id,allid);
outer=outer.replace(“#”+k.id+”,“#”+unique+”)
.replace(““'+k.id+”,“'+unique+”);
}
allIDs.push(唯一);
})
如果(例如,外部TML!==外部){
e、 outerHTML=外部;
};
})
函数createUniqueId(id,id){
设i=0;
而(++i&&id.indexOf(id.replace(/\d+/g,)+i)>-1);
返回id.replace(/\d+/g',)+i;
}
}
$(窗口)。加载(重复数据)代码>
图标/搜索
用草图创建。
图标/搜索
用草图创建。
图标/搜索
用草图创建。
图标/搜索
用草图创建。
尝试使用我制作的npm包。它删除defs和g(它们倾向于包含掩码)元素,并将path元素浮动到svg的顶层。之后