如何使用id处理Sketch导出的SVG

Question

我想在我的页面中使用svg图标.我使用的设计师使用Sketch来设计图像并将结果导出到svg中.素描增加了各种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>

我直接在html中包含了svg.通过这样做,我id多次介绍相同.除了这种工作方式导致的无效html之外,我需要根据ids 设置svg元素的样式.这是一种不好的做法.

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

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

Answer 1

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

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