Как сделать так, чтобы маркеры перекрывались идеально, чтобы они не появлялись дважды для одного и того же конца?

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

Почему бы просто не создать два отдельных определения маркера и показать правильное? Вы можете поменять идентификатор маркера с помощью переменной, как вы делаете для цвета обводки или с помощью 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