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

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

svg

SVG sprite生成器将简单形状转换为复杂路径,svg,Svg,你知道为什么我的简单形状被转换成路径（更复杂的形状）吗我有一个与SVG生成器创建的文件对比的示例：我的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="1

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

我有一个与SVG生成器创建的文件对比的示例：

我的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>


取消

发电机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>


取消

原语被重写为路径，表示属性已从

元素移动到包含的

元素。已删除

id

属性。如果您正在使用的web服务有这样做的理由，那么它们不会公开共享它们（或者至少我还没有找到这方面的文档）。就“为什么必须保持在本答案范围之外”发表意见

您使用的属性

vector effect=“non-scaling stroke”

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

添加

stroke miterlimit=“4”

在客观上是无用的，因为这是默认值

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