将svg行和路径合并到一个路径元素中

我有一个

行

元素和一个

路径

元素。我想将它们合并到一个

path

元素中，但我没有svg绘图的经验

如何将这两个svg元素添加到一个

viewport/viewBox

中，其中

vert-line-2

的“顶点”与

vert-line-1

的

y2

相连

.svg包装器{
宽度：55px；
高度：55px；
字号：0；
}
.播放垂直线{
宽度：100%；
}
.线路连接{
位置：相对位置；
左：25px；
填充：无；
}

---

让我们一步一步地引导您完成此步骤

解析线性梯度 定义笔划的线性渐变都具有缺少偏移属性的子元素。因此，它们都是默认值0。净效果是，由于笔划的所有部分都位于梯度向量原点的正侧，因此笔划具有统一的颜色

#3c3c

<代码>填充：无已移动到属性

<div class="svg-wrapper">
   <svg class="play-vert-line" height="17">
      <line id="vert-line-1" x1="50%" y1="0" x2="50%" y2="17" stroke="#3c3c3c" stroke-width="2"></line>
   </svg>
   <svg class="line-join" height="15" width="15" viewBox="-1.3 0 15 15">
      <path id="vert-line-2" d="M 11, 10 C 5, 10, 1, 6, 1, 0"
            stroke="#3c3c3c" stroke-width="2" fill="none"></path>
   </svg>
</svg>

计算子

s的等效变换 此时，内部SVG有自己的视口和坐标系。到父视口的转换可以按照以下步骤计算。然后，可以将

元素交换为

元素

如果出现溢出，则需要一个

剪辑路径

属性

<svg class="svg-wrapper" width="55" height="55" viewBox="0 0 55 55">
   <g class="play-vert-line">
      <line id="vert-line-1" x1="27.5" y1="0" x2="27.5" y2="17" stroke="#3c3c3c" stroke-width="2"></line>
   </g>
   <g class="line-join" transform="translate(26.3, 17)">
      <path id="vert-line-2" d="M 11, 10 C 5, 10, 1, 6, 1, 0"
            stroke="#3c3c3c" stroke-width="2" fill="none"></path>
   </g>
</svg>

（如图所示，L命令可以省略。）

加入他们还有一个更复杂的问题。第一个子路径从上端开始，但第二个子路径从下端开始。要以从上到下的方向连接它们，必须反转第二个子路径的方向。在C命令的特殊情况下，可以简单地按顺序反转所有坐标。对于其他命令（尤其是相对路径命令），这可能更复杂

d="M 27.5 0 27.5 17 M 27.3, 17 C 27.3, 23, 31.3, 27, 36.3, 27"

你没有说如何连接这两个子路径。让我们假设一条直线

---

让我们一步一步地引导您完成此步骤

解析线性梯度 定义笔划的线性渐变都具有缺少偏移属性的子元素。因此，它们都是默认值0。净效果是，由于笔划的所有部分都位于梯度向量原点的正侧，因此笔划具有统一的颜色

#3c3c

<代码>填充：无已移动到属性

<div class="svg-wrapper">
   <svg class="play-vert-line" height="17">
      <line id="vert-line-1" x1="50%" y1="0" x2="50%" y2="17" stroke="#3c3c3c" stroke-width="2"></line>
   </svg>
   <svg class="line-join" height="15" width="15" viewBox="-1.3 0 15 15">
      <path id="vert-line-2" d="M 11, 10 C 5, 10, 1, 6, 1, 0"
            stroke="#3c3c3c" stroke-width="2" fill="none"></path>
   </svg>
</svg>

计算子

s的等效变换 此时，内部SVG有自己的视口和坐标系。到父视口的转换可以按照以下步骤计算。然后，可以将

元素交换为

元素

如果出现溢出，则需要一个

剪辑路径

属性

<svg class="svg-wrapper" width="55" height="55" viewBox="0 0 55 55">
   <g class="play-vert-line">
      <line id="vert-line-1" x1="27.5" y1="0" x2="27.5" y2="17" stroke="#3c3c3c" stroke-width="2"></line>
   </g>
   <g class="line-join" transform="translate(26.3, 17)">
      <path id="vert-line-2" d="M 11, 10 C 5, 10, 1, 6, 1, 0"
            stroke="#3c3c3c" stroke-width="2" fill="none"></path>
   </g>
</svg>

（如图所示，L命令可以省略。）

加入他们还有一个更复杂的问题。第一个子路径从上端开始，但第二个子路径从下端开始。要以从上到下的方向连接它们，必须反转第二个子路径的方向。在C命令的特殊情况下，可以简单地按顺序反转所有坐标。对于其他命令（尤其是相对路径命令），这可能更复杂

d="M 27.5 0 27.5 17 M 27.3, 17 C 27.3, 23, 31.3, 27, 36.3, 27"

你没有说如何连接这两个子路径。让我们假设一条直线

定义“合并”。我的意思是创建一个与代码片段中的

line

和

path

完全相似的

path

元素。例如，Inkscape在其GUI中提供了合并和联合方法：这两个元素不属于同一个视口（根svg元素）。定义两个视口之间的几何关系。讨论在调整视口大小时会发生什么，因为第一个以百分比表示宽度。感谢您的回答，我再次编辑了我的问题<代码>视口应与屏幕截图中的类似，

路径

的“顶点”与

行

的

y2

属性连接。定义“合并”。我的意思是创建一个

path

元素，该元素与代码片段中的

line

和

path

完全相同。例如，Inkscape在其GUI中提供了合并和联合方法：这两个元素不属于同一个视口（根svg元素）。定义两个视口之间的几何关系。讨论在调整视口大小时会发生什么，因为第一个以百分比表示宽度。感谢您的回答，我再次编辑了我的问题<代码>视口应与屏幕截图中的类似，

路径

的“顶点”与

行

的

y2

属性连接。感谢您的帮助。我自己不会想出这个解决方案。我希望您了解到，只有您用例中非常非常特殊的条件才能使解决方案成为可能。当然，我只是将

视口更改为
width=“100%”height=“100%”viewBox=“0 100”
，并以相对单位工作。谢谢您的帮助。我自己不会想出这个解决方案。我希望您了解到，只有您的用例中非常非常特殊的条件才能使解决方案成为可能。当然，我只是将
视口
更改为
width=“100%”height=“100%”viewBox=“0 100”
，并且它以相对单位工作。
d="M 27.5 0 27.5 17 M 27.3, 17 C 27.3, 23, 31.3, 27, 36.3, 27"