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

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