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

Question

我有一个line元素和一个path元素。我想将它们合并为一个path元素，但我没有 svg 绘图的经验。

我怎样才能将这两个 svg 元素合并为一个viewport/viewBox，其中“顶点” of与ofvert-line-2相连。y2vert-line-1

.svg-wrapper{
  width: 55px;
  height: 55px;
  font-size: 0;
}

.play-vert-line{
  width: 100%;
}

.line-join{
  position: relative;
  left: 25px;
  fill: none;
}

<div class="svg-wrapper">
   <svg class="play-vert-line" height="17">
      <defs>
         <linearGradient id="vert-gradient" gradientUnits="userSpaceOnUse" y1="0%" y2="100%" x1="0" x2="0">
            <stop stop-color="#3A9AFC"></stop>
            <stop stop-color="#3c3c3c"></stop>
         </linearGradient>
      </defs>
      <line id="vert-line-1" x1="50%" y1="0" x2="50%" y2="17" stroke="url(#vert-gradient)" stroke-width="2"></line>
   </svg>
   <svg class="line-join" height="15" width="15" viewBox="-1.3 0 15 15">
      <defs>
         <linearGradient id="vert-join-gradient" gradientUnits="userSpaceOnUse" y2="100%" x1="0" x2="0">
            <stop stop-color="#3A9AFC"></stop>
            <stop stop-color="#3c3c3c"></stop>
         </linearGradient>
      </defs>
      <path id="vert-line-2" d="M 11, 10 C 5, 10, 1, 6, 1, 0" stroke="url(#vert-join-gradient)" stroke-width="2"></path>
   </svg>
</div>

Answer 1

让我们逐步引导您完成此操作。

解析线性梯度

定义笔画的线性渐变都具有<stop>缺少offset属性的子元素。因此，它们都处于默认值 0。净效果是，由于笔划的所有部分都位于梯度矢量原点的正侧，因此笔划具有统一的颜色#3c3c3c。fill:none已移至属性。

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

将两个<svg>元素移动到一个父元素中<svg>

div.svg-wrapper交换为相同大小（55*55）的 svg 元素，并将两个 svg 放置在内部，按照样式表定义的位置和大小。此时所有百分比值都将交换为绝对值。

应该注意的是，形式上，内部 svgs 必须定义一个overflow="hidden"属性（隐式定义一个剪辑路径）。可以安全地将其关闭，因为图形元素不会溢出其视口。

<svg class="svg-wrapper" width="55" height="55" viewBox="0 0 55 55">
   <svg class="play-vert-line" height="17" width="55">
      <line id="vert-line-1" x1="27.5" y1="0" x2="27.5" y2="17" stroke="#3c3c3c" stroke-width="2"></line>
   </svg>
   <svg class="line-join" x="25" y="17" 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>

计算子<svg>s的等效变换

此时，内部 svgs 就有了自己的视口和坐标系。可以按照该算法计算到父视口的变换。然后，<svg>可以将元素交换为<g>元素。

如果存在溢出，则clip-path需要一个属性。

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

应用变换并将线转换为路径

实际上，只有<path>元素应用了变换。可以删除组元素，并且在d属性中，必须重新计算每个坐标：x' = x + dx，y' = y + dy。

要转换<line>为<path>，d必须使用线的起始和结束坐标写入属性：

d="M <x1> <y1> L <x2> <y2>"

（L 命令可以省略，因为它是暗示的。）

<svg class="svg-wrapper" width="55" height="55" viewBox="0 0 55 55">
    <path id="vert-line-1" d="M 27.5 0 27.5 17" stroke="#3c3c3c" stroke-width="2"></path>
    <path id="vert-line-2" d="M 36.3, 27 C 31.3, 27, 27.3, 23, 27.3, 17"
          stroke="#3c3c3c" stroke-width="2" fill="none"></path>
</svg>

合并并连接两个路径元素

由于两个路径元素现在用相同的坐标系表示并具有相同的表示属性（不要忘记fill="none"），因此d现在可以简单地将属性连接起来：

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

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

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

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

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