Question

我会在路径中绘制标记，但不幸的是只打印了一行。

我正在defs中定义标记，然后在路径中通过id调用它，但标记不起作用。

<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
    <defs>
      <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
      <marker id='start' orient="auto" markerWidth='2' markerHeight='4' refX='0.1' refY='1'>
      <!-- triangle pointing right (+x) -->
      <path d='M0,0 V2 L1,1 Z' fill="orange"/>
      </marker>
    </defs>
    <title>line</title>
    <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" marker-mid="url(#start)" />
  
   
</svg>

Answer 1

您的路径中没有顶点

标记会在路径数据的第一个和最后一个顶点以外的每个顶点上渲染。 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-mid

您的路径是d="M202,67.72,319.33,215.86"，仅两点。因此marker-mid将不会显示。

不确定，但是我想您真正需要的是marker-end？

<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
   <defs>
  <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
  <marker id='start' orient="auto" markerWidth='2' markerHeight='4' refX='0.1' refY='1'>
  <!-- triangle pointing right (+x) -->
  <path d='M0,0 V2 L1,1 Z' fill="orange"/>
  </marker>
</defs>
    <title>line</title>
    <path id="path7" class="cls-1" d="M202,67.72,319.33,215.86" transform="translate(-200.1 -66.09)" marker-end="url(#start)" />
  
   
</svg>

Answer 2

如果在中间需要标记，则需要在路径上添加一个点。在这种情况下，我使用的是d="M202,67.72 L265.665, 141.79 329.33,215.86"而不是d="M202,67.72 L329.33,215.86"

<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
    <defs>
      <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
      <marker id='start' orient="auto" markerWidth='2' markerHeight='4' refX='0.1' refY='1'>
      <!-- triangle pointing right (+x) -->
      <path d='M0,0 V2 L1,1 Z' fill="orange"/>
      </marker>
    </defs>
    <title>line</title>
    <path id="path7" class="cls-1" d="M202,67.72 L265.665, 141.79 329.33,215.86" transform="translate(-200.1 -66.09)" marker-mid="url(#start)" />   
</svg>

要知道在何处添加该点，可以执行以下操作：

首先，您需要知道路径的长度：path7.getTotalLength()如果需要在路径中间的点，则该点应为半长。
为了获得该点的坐标，可以使用getPointatLength()方法： path7.getPointAtLength(path7.getTotalLength()/2)。这将返回一个SVGPoint，您可以使用该点的x和y值将点添加到路径中。

在路径中绘制svg标记

2 个答案: