html - 如何使标记完美重叠，使其不会在同一端出现两次？

Question

我正在尝试实现一个突出显示功能，使箭头更大并改变其颜色。但问题是，当宽度变化时，两个末端标记(箭头)之一会变大，但也不会与较小的标记重叠。我怎样才能使其重叠，以便它们显示为一个更大的箭头而不是两个

没有突出显示

突出显示

我的代码

    render() {
    const [start, target] = this.props.points;
    const activeColor = !this.state.isActive ? "#6b6b6b" : "#ffa500";
    const arrowWidth = !this.state.isActive ? "1" : "2";

    return (
        <g>
            {
                this.props.IsNotDot &&
                <line
                    x1={start.x}
                    y1={start.y}
                    x2={target.x}
                    y2={target.y}
                    stroke={activeColor}
                    strokeWidth={arrowWidth}
                    strokeOpacity="0.7"
                    markerEnd="url(#arrowhead)"/>
            }
        </g>
    );
}

Answer 1

为什么不直接创建两个单独的标记定义并显示正确的定义呢？您可以将标记的 ID 与变量交换，就像您对描边颜色所做的那样或使用 CSS。

注意:我必须将 markerWidth、markerHeight、refX 和 refY 按比例使其发挥作用。我认为其原因在于 SVG 如何处理缩放笔画。

<svg>
    <defs>
        <marker id="arrowA" 
        markerWidth="10" 
        markerHeight="10" 
        refX="0" refY="3" 
        orient="auto"
        markerUnits="strokeWidth">
            <path fill="black" d="M0,0 L0,6 L9,3 z" />   
        </marker>
        <marker id="arrowB" 
        markerWidth="30" 
        markerHeight="30" 
        refX="0" refY="9" 
        orient="auto"
        markerUnits="strokeWidth">
          <path 
          fill="orange" transform='scale(3)' 
          d="M0,0 L0,6 L9,3 z" />
        </marker>
    </defs>
</svg>

<svg id="lineA" width="276px" height="100px">
    <line x1="64" y1="28" x2="200" y2="70" 
    stroke="black" 
    marker-end="url(#arrowA)">
    </line>
</svg>
<svg id="lineB" width="276px" height="100px">
    <line x1="64" y1="28" x2="200" y2="70" 
    stroke="black" 
    marker-end="url(#arrowB)">
    </line>
</svg>

要交换的 CSS

#lineA {
  cursor:pointer;
}

#lineA line {
  marker-end: url("#arrowA");
}


#lineA:hover line {
  stroke:orange;
  marker-end: url("#arrowB");
}

<svg>
    <defs>
        <marker id="arrowA" 
        markerWidth="10" 
        markerHeight="10" 
        refX="0" refY="3" 
        orient="auto"
        markerUnits="strokeWidth">
            <path fill="black" d="M0,0 L0,6 L9,3 z" />   
        </marker>
        <marker id="arrowB" 
        markerWidth="20" 
        markerHeight="20" 
        refX="0" refY="6" 
        orient="auto"
        markerUnits="strokeWidth">
          <path 
          fill="orange" transform='scale(2)' 
          d="M0,0 L0,6 L9,3 z" />
        </marker>
    </defs>
</svg>

<svg id="lineA" width="276px" height="100px">
    <line x1="64" y1="28" x2="200" y2="70" 
    stroke="black" >
    </line>
</svg>

Hover over the arrow