14

我想在我的页面中使用 svg 图标。与我合作的设计师使用 Sketch 设计图像并将结果导出为 svg。Sketch 将各种id标签添加到导出的代码中（注意id="Page-1",id="My-Star"和id="Star-1"属性）：

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="My-Star" stroke="#979797" fill="#D8D8D8">
                <polygon id="Star-1" points="11.9860934 18.5835921 5.4876995 22 6.7287823 14.763932 1.47147118 9.63932023 8.73689646 8.58359214 11.9860934 2 15.2352904 8.58359214 22.5007157 9.63932023 17.2434045 14.763932 18.4844873 22 "></polygon>
            </g>
        </g>
    </svg>

我将 svg 直接包含在 html 中。通过这样做，我id多次介绍相同的内容。除了这种工作方式导致的无效 html 之外，我还需要基于ids 设置 svg 元素的样式。这是一个不好的做法。

我使用 css 来设置 svgs 的样式，看一个例子

问题：从 Sketch 导出 svg 时，
有没有办法id用 es 替换 s ？class我可以给设计师一些插件或设置吗？如果不是，从设计师那里接收 svg 资产并在页面中使用它的最佳工作流程是什么？

4

5 回答 5

4

如果您正在处理通过 Sketch 导出的SVG，我强烈建议您将svgo添加到您的工作流程中。该工具不仅会消除未使用的 ID（您仍然需要手动解析SVG 使用的 ID），而且它还可以比默认的 SVG 导出更好地优化 SVG。

如果您经常这样做，请将 SVGO 添加到您的开发/构建过程中（参见示例）；但是，如果您只想将其用于测试运行，那么还有一个基于 Web 的 GUI：https ://jakearchibald.github.io/svgomg/

于 2020-02-13T15:45:32.053 回答
0

我通过为每个 SVG 中包含的 ID 添加不同的前缀来修复它。为避免故障，它会隐藏 SVG，直到将前缀添加到 ID。

CSS：

    svg {
        opacity: 0;
        transition: opacity .5s ease-in-out;
    }
    svg.svg-visible {
        opacity: 1;
    }

JS：

    function replaceAll(str, find, replace) {
      var escapedFind=find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
      return str.replace(new RegExp(escapedFind, 'g'), replace);
    }
    
    var svgCounter = 0;
    
    [].forEach.call(document.querySelectorAll('svg'), function(el) {
      var contentReplaced = replaceAll(el.innerHTML,'id="','id="n' + svgCounter); 
      contentReplaced = replaceAll(contentReplaced,'url(#','url(#n' + svgCounter);
      contentReplaced = replaceAll(contentReplaced,'xlink:href="#','xlink:href="#n' + svgCounter);
      el.innerHTML = contentReplaced;
      el.classList.add('svg-visible');
      svgCounter++;
    })

您还可以使用 PHP 使其更清洁：

    function inlinesvg($module, $svg) {
        $id = 'svg-' . substr(md5(uniqid(mt_rand(), true)) , 0, 8);
        $file_contents = file_get_contents('./assets/img/'.$module.'/'.$svg.'.svg');
        $file_contents = str_replace('id="','id="' . $id, $file_contents);
        $file_contents = str_replace('url(#','url(#' . $id, $file_contents);
        $file_contents = str_replace('xlink:href="#','xlink:href="#' . $id, $file_contents);
        echo $file_contents;
    }
于 2021-04-28T11:06:15.943 回答
0

我在 Sketch 本身中没有找到任何解决方案，但我发现了一个使用 PHP 的简单的解决方案。在 Sketch 中，我将我想要的每个组或路径命名为以 . 点，例如.person，并导出文件。显然这个组还有id=".person"

然后我使用 PHP 将 .svg 加载到页面中，并按类替换所有以点开头的 ID： <?php echo str_replace('id=".', 'class="', file_get_contents( 'sample.svg' )); ?>

我知道这并不理想，但适用于我的情况。

于 2018-02-21T10:51:22.883 回答
0

除了要求设计师使用唯一的组名之外，似乎没有其他好的解决方案。

组名成为生成的 SVG 中的组 id。

于 2016-08-21T11:42:37.850 回答
-1

我遇到了同样的问题，所以做了一个插件。使用此插件，从切片导出的 svg 中的所有 id 都以 BEM 样式命名。

https://github.com/Knowre-Dev/svg-namespacing

于 2016-08-03T05:02:03.410 回答