Question

你知道为什么我的简单形状被转换为路径（形状更复杂）吗？

我有一个我的文件示例与SVG生成器创建的内容：codepen

我的svg：

<svg id="cancel" viewBox="0 0 25 25" fill="none" stroke="#000" stroke-width="0.8px" stroke-linecap="round">
    <title>Cancel</title>
    <circle cx="12.5" cy="12.53" r="12.08" vector-effect="non-scaling-stroke"/>
    <line x1="17.86" y1="7.86" x2="7.86" y2="17.86" vector-effect="non-scaling-stroke"/>
    <line x1="17.84" y1="17.84" x2="7.88" y2="7.88" vector-effect="non-scaling-stroke"/>
</svg>

Generator svg：

<svg viewBox="0 0 25 25">
<title>cancel</title>
<path fill="none" stroke="#000" stroke-width="0.8" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M24.58 12.53c0 6.672-5.408 12.080-12.080 12.080s-12.080-5.408-12.080-12.080c0-6.672 5.408-12.080 12.080-12.080s12.080 5.408 12.080 12.080z"></path>
<path fill="none" stroke="#000" stroke-width="0.8" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M17.86 7.86l-10 10"></path>
<path fill="none" stroke="#000" stroke-width="0.8" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M17.84 17.84l-9.96-9.96"></path>
</svg>

Answer 1

基元被重写为路径，表示属性已从View元素移动到包含的<svg>。已删除<paths>属性。如果您使用的Web服务有理由这样做，他们不会公开分享它们（或者至少我没有找到该文档）。提出对原因的意见必须超出这个答案的范围。

您使用的属性id不是SVG 1.1规范的一部分，而只是SVG 1.2 Tiny和SVG 2草案的一部分。 Internet Explorer不支持此属性，因此删除它可以提高浏览器兼容性。

添加vector-effect="non-scaling-stroke"是客观无用的，因为这是默认值。

有一个库svgo可以用您看到的方式重写代码（几乎不包括默认值问题），但我无法确定服务是否正在使用它。

SVG精灵生成器将简单形状转换为复杂路径

1 个答案: