导出SVG时线条变为圆点的原因及解决方法咨询

• Illustrator中的效果：右侧标尺区域有三条短水平线条
• 导出SVG后的效果：原本的短线条变为三个圆点

查看导出的SVG代码（对应代码片段中第39-41行），可见原本的线条被转化为零长度路径。
疑问：为什么会出现这种情况？如何让线条正常导出为SVG？已确认所有项目均作为单一资产导出。

导出的SVG代码如下：

<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1010 983.95">  <defs>    <style>      .cls-1, .cls-2 {        stroke: #231f20;        stroke-miterlimit: 10;        stroke-width: 10px;      }      .cls-1, .cls-3 {        fill: none;      }      .cls-2 {        fill: #00aeef;      }      .cls-4 {        clip-path: url(#clippath);      }    </style>    <clipPath id="clippath">      <rect class="cls-3" x="5" y="9.62" width="700" height="969.33"/>    </clipPath>  </defs>  <g id="Layer_1-2" data-name="Layer 1">    <g id="main">      <rect class="cls-1" x="5" y="5" width="700" height="973.95"/>      <g id="clippingMask">        <g class="cls-4">          <g id="fillAmount">            <path class="cls-2" d="M705,518.06c-87.52,0-87.52,12.47-175.05,12.47s-87.52-12.47-175.05-12.47-87.46,12.47-174.93,12.47-87.49-12.47-174.98-12.47v460.89H705v-460.89Z"/>          </g>        </g>      </g>      <g id="measures">        <polyline class="cls-1" points="805 5 1005 5 1005 978.95 805 978.95"/>        <path class="cls-1" d="M1005,491.97h0Z"/>        <path class="cls-1" d="M1005,735.46h0Z"/>        <path class="cls-1" d="M1005,248.49h0Z"/>      </g>    </g>  </g></svg>

这些圆点本质是零长度路径：代码里的<path class="cls-1" d="M1005,491.97h0Z"/>这类路径，h0表示水平移动0距离，相当于只有一个锚点。当给这类零长度路径设置了stroke-width:10px的描边样式时，SVG渲染器会将其渲染为圆点——因为路径没有长度，仅显示描边的端点。

出现这种情况的原因是：在Illustrator中绘制的短线条被过度简化，可能是绘制时线段过短，或是编辑路径时锚点重合，Illustrator能识别为短线条，但导出SVG时被转化为零长度路径。

1. 修正Illustrator中的原始路径 #

• 选中这些标记线，使用钢笔工具拉长路径，确保线段有实际长度（哪怕1px）；或打开「路径查找器」面板，点击「合并」功能修复路径
• 检查路径锚点，删除重合的锚点，保留有效线段

2. 调整SVG导出设置 #

• 在Illustrator导出SVG时，进入「更多选项」，勾选「保留Illustrator编辑功能」，避免路径被过度简化
• 选择「SVG代码」导出模式，可提前预览并修正路径问题

3. 直接修改SVG代码 #

手动编辑导出的SVG文件，将零长度路径替换为实际线段：
将原代码中：

<path class="cls-1" d="M1005,491.97h0Z"/>
<path class="cls-1" d="M1005,735.46h0Z"/>
<path class="cls-1" d="M1005,248.49h0Z"/>

修改为：

<path class="cls-1" d="M1005,491.97h-15"/>
<path class="cls-1" d="M1005,735.46h-15"/>
<path class="cls-1" d="M1005,248.49h-15"/>

h-15表示从起点向左绘制15px的水平线段，可根据实际需求调整长度，确保和右侧标尺边框对齐。

内容的提问来源于stack exchange，提问作者Drago The Flying Slav