在svg中绘制半透​​明箭头

Question

我有一个箭头 React 组件，它使用给定的代码在板上绘制一个箭头。问题是当我想绘制一个半透明箭头时，它看起来很难看，因为形状合并的区域变得更暗。

考虑到使箭头精确位于道具给出的坐标上很重要，我该如何修复它？

const Arrow = ({ from, to, customArrowColor }) => (
  <Fragment>
    <defs>
      <marker
        id="arrowhead"
        markerWidth="2"
        markerHeight="2.5"
        refX="1.25"
        refY="1.25"
        orient="auto"
      >
        <polygon
          points="0 0, 2 1.25, 0 2.5"
          style={{ fill: "rgba(28, 195, 42, 0.35)" }}
        />
      </marker>
    </defs>
    <line
      x1={from.x}
      y1={from.y}
      x2={to.x}
      y2={to.y}
      style={{
        stroke: "rgba(28, 195, 42, 0.35)",
      }}
      markerEnd="url(#arrowhead)"
    />
  </Fragment>
);

Answer 1

您可以使用不透明颜色并更改<line>元素的不透明度：

body {
    margin: 0;
    font-size: 1.5em;
    line-height: 1.3em;
    background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0 0 L10 0 L10 9' stroke-width='1' fill='none' stroke='%23eee' /%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 10px;
}

<svg viewBox="0 0 100 100">
  <marker id="arrowhead" markerWidth="2" markerHeight="2.5" refX="1.25" refY="1.25" orient="auto">
    <polygon points="0 0, 2 1.25, 0 2.5" fill="rgba(28, 195, 42, 1)"  />
  </marker>
    <line x1="0" y1="50" x2="50" y2="50" opacity="0.5" stroke="rgba(28, 195, 42, 1)" stroke-width="5"  style="marker-end:url(#arrowhead)" />
</svg>