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

Question

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

我如何将这两个svg元素组合成一个viewport/viewBox，其中＆＃34;顶点＆＃34; vert-line-2与[{1}}的{​​{1}}加在一起。

＆＃13;

＆＃13;

y2

＆＃13;

vert-line-1

＆＃13;

＆＃13;

＆＃13;

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被交换为相同大小的svg元素（55 * 55），并且两个svg被放置在样式表定义的内部，定位和大小中。此时的所有百分比值都将替换为绝对值。

应该注意的是，正式地，内部svgs必须定义overflow="hidden"属性（隐含地定义剪辑路径）。它可以安全地离开，因为grafical元素不会溢出它们的视口。

<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有自己的视口和自己的坐标系。可以在this algorithm之后计算到父视口的转换。然后，<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"

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

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