如何复用SVG图标标记、移除cx/cy属性并调整path与polyline？

针对你的两个核心需求，我整理了可落地的实现方案，既能保证两个图标标记结构完全一致，又能精准调整位置对齐<rect>边缘：

一、让两个图标拥有完全相同的标记结构 #

要实现通过CSS类灵活控制样式，关键是让两个图标使用完全一致的DOM结构，仅通过外层区分类来识别。你可以把每个图标的核心元素封装在相同的<g>容器中，内部元素使用统一类名，再给外层SVG或<g>添加专属类（比如.icon-one和.icon-two）。

示例结构如下：

<!-- 图标 One -->
<svg class="custom-icon icon-one" viewBox="0 0 18 18" width="24" height="24">
  <rect width="18" height="18" fill="none" />
  <!-- 统一的核心结构 -->
  <g class="icon-core">
    <circle class="icon-circle" r="4" /> <!-- 移除cx/cy属性 -->
    <path class="icon-shape" d="..." />
    <polyline class="icon-line" points="..." />
  </g>
</svg>

<!-- 图标 Two -->
<svg class="custom-icon icon-two" viewBox="0 0 18 18" width="24" height="24">
  <rect width="18" height="18" fill="none" />
  <!-- 和图标One完全一致的核心结构 -->
  <g class="icon-core">
    <circle class="icon-circle" r="4" /> <!-- 结构完全匹配 -->
    <path class="icon-shape" d="..." />
    <polyline class="icon-line" points="..." />
  </g>
</svg>

之后你就能通过CSS类轻松控制样式，比如：

/* 全局图标基础样式 */
.custom-icon {
  color: #333;
}

/* 图标One的特殊填充样式 */
.icon-one .icon-shape {
  fill: #ff4444;
}

/* 图标Two的特殊线条样式 */
.icon-two .icon-line {
  stroke-width: 2;
  stroke: #0099ff;
}

二、移除cx/cy后调整位置对齐<rect>边缘 #

直接移除<circle>的cx/cy会导致它默认以(0,0)为圆心，我们可以用**transform: translate()**来整体控制图标核心元素的位置，代替原来的cx/cy，同时调整path和polyline的坐标为相对位置。

具体操作步骤： #

1. 用transform代替cx/cy定位：给.icon-core添加transform: translate(x, y)，其中x和y是你需要对齐<rect>边缘的坐标（比如要对齐左上角边缘，可设为translate(2, 2)，数值根据你的<rect>尺寸和边距调整）。
2. 调整path/polyline的相对坐标：把原来基于cx=9, cy=9的绝对坐标，转换成相对于(0,0)的局部坐标。比如原来的path有一段L 12 9，现在要改成L 3 0（因为12-9=3，9-9=0），配合transform后，实际位置就会精准对齐目标边缘。

示例代码：

/* 图标One对齐rect左上角边缘 */
.icon-one .icon-core {
  transform: translate(2, 2); /* 可根据实际需求调整x/y值 */
}

/* 图标Two对齐rect右下角边缘 */
.icon-two .icon-core {
  transform: translate(12, 12); /* 18-4-2=12，根据circle半径和边距计算 */
}

为什么选择这种方式？ #

• 使用transform整体偏移，比单独修改每个元素的坐标更高效，且能严格保持结构一致性。
• 把path/polyline改为相对坐标后，配合transform可以完全避免cx/cy带来的偏移问题，精准贴合<rect>边缘。

额外注意事项 #

• 确保两个图标的viewBox完全一致，这样缩放时不会出现变形或错位。
• 如果需要调整<circle>大小，直接修改r属性即可，配合transform的坐标就能适配<rect>边缘。
• 调试时可以给<rect>临时添加边框（比如stroke: red），方便观察图标是否准确对齐。

内容的提问来源于stack exchange，提问作者mr__brainwash