Question

我需要从原始连接生成多个并行连接，如代码所示：

代码：

<svg width="800" height="800">

  <!-- one filter -->

  <g transform="translate(50,50)">
    <text y="50">Original</text>
   <path d="m  0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>

  </g>

  <g transform="translate(250,50)">
    <text y="50">Generated</text>
    <path d="m  0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>
    <path d="m  10,0L10,90 L100,90 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>
    <path d="m  20,0L20,80 L100,80 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>
  </g>


  <g transform="translate(50,250)">
    <text y="50">Original</text>

    <path d="m  0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>

  </g>

  <g transform="translate(250,250)">
    <text y="50">Generated</text>
     <path d="m  0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>
     <path d="m  10,0L20,80 L100,60 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>
  </g>

</svg>

https://codepen.io/anon/pen/wyObNr

有没有简单的方法呢？像克隆这样的东西，只是让它适合原始的那个就是perf

问候

Answer 1

Svg提供了使用defs元素重用部分图形的方法。它可能包含包含任意复杂场景的组（g元素）。之后可以用use元素引用这些元素，这有效地产生一个克隆，然后可以进行转换（旋转，缩放，翻译的任意组合）。

以下是您的示例场景的重新制定：

<svg
    width="800" height="800"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
>
    <defs>
        <g id="angle">
            <path d="m  0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url(&quot;#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl&quot;);"></path>
        </g>
        <g id="multi">
            <use xlink:href="#angle" />
            <use xlink:href="#angle" transform="translate(10,-10)"/>
            <use xlink:href="#angle" transform="translate(20,-20)"/>
        </g>
    </defs>

    <!-- base case -->
    <g transform="translate(50,50)">
        <text x="50" y="50">Original</text>
        <use xlink:href="#angle"/>
    </g>

    <g transform="translate(50,50) translate(200,0)">
        <text x="50" y="50">Generated</text>
        <use xlink:href="#multi" />
    </g>

    <!-- rotated -->
    <g transform="translate(50,50) translate(0,200)">
        <text x="50" y="50">Original</text>
        <g transform="rotate(-20)">
            <use xlink:href="#angle"/>
        </g>
    </g>

    <g transform="translate(50,50) translate(200,200)">
        <text x="75" y="25">Generated</text>
        <g transform="rotate(-20)">
            <use xlink:href="#multi"/>
        </g>
    </g>
</svg>

在SVG上绘制并行连接

1 个答案: