Svg 图标删除掩码并使用标签答案

【问题标题】：Svg icon remove mask and use tagsSvg 图标删除掩码并使用标签
【发布时间】：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 中可能是相同的。

有办法把这个或其他东西变平吗？我没有这方面的知识，所以我可以使用你的帮助。（或自动工具）

【问题讨论】：

请您的设计师确保 ID 是唯一的（可能基于源图像 ID）。

标签： javascript css svg

【解决方案1】：

尝试使用我制作的名为 svgood 的 npm 包。它删除了 defs 和 g（它们往往包含 masks）元素并将 path 元素浮动到svg 的顶层。完成此操作后，您可以自己将样式和转换直接应用于 svg，这往往比使用蒙版时更容易并且给您更多的控制。我有一些使它更有用的计划，但如果我可以添加一些可以使它更适合你的用例的东西，请告诉我。

【讨论】：

【解决方案2】：

这是一个去重 ids 函数。

注意：它相当激进，因为它将完全删除<svg>s 内部元素上需要id 替换的任何绑定事件，因为我正在处理他们的@987654323 @ 作为字符串，在需要时替换 ids 并将 <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> 的结果放在源代码中的<svg>s 中，这样我就有唯一的ids从那时起，无需运行重复数据删除功能。

【讨论】：