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

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>&nbsp; &nbsp; <defs>&nbsp; &nbsp; &nbsp; &nbsp; <marker id="arrowA"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerWidth="10"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerHeight="10"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; refX="0" refY="3"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; orient="auto"&nbsp; &nbsp; &nbsp; &nbsp; markerUnits="strokeWidth">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <path fill="black" d="M0,0 L0,6 L9,3 z" />&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </marker>&nbsp; &nbsp; &nbsp; &nbsp; <marker id="arrowB"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerWidth="30"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerHeight="30"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; refX="0" refY="9"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; orient="auto"&nbsp; &nbsp; &nbsp; &nbsp; markerUnits="strokeWidth">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <path&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill="orange" transform='scale(3)'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d="M0,0 L0,6 L9,3 z" />&nbsp; &nbsp; &nbsp; &nbsp; </marker>&nbsp; &nbsp; </defs></svg><svg id="lineA" width="276px" height="100px">&nbsp; &nbsp; <line x1="64" y1="28" x2="200" y2="70"&nbsp;&nbsp; &nbsp; stroke="black"&nbsp;&nbsp; &nbsp; marker-end="url(#arrowA)">&nbsp; &nbsp; </line></svg><svg id="lineB" width="276px" height="100px">&nbsp; &nbsp; <line x1="64" y1="28" x2="200" y2="70"&nbsp;&nbsp; &nbsp; stroke="black"&nbsp;&nbsp; &nbsp; marker-end="url(#arrowB)">&nbsp; &nbsp; </line></svg>CSS 交换#lineA {&nbsp; cursor:pointer;}#lineA line {&nbsp; marker-end: url("#arrowA");}#lineA:hover line {&nbsp; stroke:orange;&nbsp; marker-end: url("#arrowB");}<svg>&nbsp; &nbsp; <defs>&nbsp; &nbsp; &nbsp; &nbsp; <marker id="arrowA"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerWidth="10"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerHeight="10"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; refX="0" refY="3"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; orient="auto"&nbsp; &nbsp; &nbsp; &nbsp; markerUnits="strokeWidth">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <path fill="black" d="M0,0 L0,6 L9,3 z" />&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </marker>&nbsp; &nbsp; &nbsp; &nbsp; <marker id="arrowB"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerWidth="20"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; markerHeight="20"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; refX="0" refY="6"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; orient="auto"&nbsp; &nbsp; &nbsp; &nbsp; markerUnits="strokeWidth">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <path&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill="orange" transform='scale(2)'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d="M0,0 L0,6 L9,3 z" />&nbsp; &nbsp; &nbsp; &nbsp; </marker>&nbsp; &nbsp; </defs></svg><svg id="lineA" width="276px" height="100px">&nbsp; &nbsp; <line x1="64" y1="28" x2="200" y2="70"&nbsp;&nbsp; &nbsp; stroke="black" >&nbsp; &nbsp; </line></svg>Hover over the arrow