Question

我想在我的页面中使用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之外，我还需要根据id来设置svg元素的样式。这是一种不好的做法。

我使用css来设置svgs的样式，看看example

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

Answer 1

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

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

Answer 2

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

组名称在生成的SVG中成为组ID。

Answer 3

我在Sketch本身没有找到任何解决方案，但我发现使用PHP进行简单的转发。在Sketch中，我将每个我想要的组或路径命名为以a开头的类。点，例如.person，然后导出文件。显然该组仍有id=".person"

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

我知道这不太理想，但在我的情况下有效。

Answer 4

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

CSS：

try:
    df = pd.read_csv('my_csv.csv', delimiter=',')
except:
    df = pd.read_csv('my_csv.csv', delimiter='.')

JS：

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

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

    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++;
    })

Answer 5

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

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

如何使用ID

5 个答案: