javascript - 在路径中绘制 svg 标记

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

路径中没有顶点

The marker is rendered on every vertex other than the first and last vertices of the path data. 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>