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

Posted 2023-03-05

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

【英文标题】：How can I make the markers overlap perfectly so it doesn't appear twice for the same end?

【发布时间】：2020-06-20 14:46:51

【问题描述】：

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

不加亮

高亮显示

我的代码

    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>
    );

【问题讨论】：

你能把它做成一个在线演示，可能会有很大帮助吗？

【参考方案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"  >
    <line x1="64" y1="28" x2="200" y2="70" 
    stroke="black" 
    marker-end="url(#arrowA)">
    </line>
</svg>
<svg id="lineB"  >
    <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"  >
    <line x1="64" y1="28" x2="200" y2="70" 
    stroke="black" >
    </line>
</svg>

Hover over the arrow

【讨论】：

您可能还希望在箭头B 上设置refX="10" 以使较大箭头的点与较小箭头的点对齐。

同意。有很多可用的调整。我只是使用比例因子的直接乘数来接近。加上偶数居中总是有点奇怪:-)