我正在嘗試實現(xiàn)一個突出顯示功能，使箭頭更大并改變其顏色。但問題是，當寬度變化時，兩個末端標記（箭頭）之一會變大，但也不會與較小的標記重疊。我怎樣才能讓它重疊，讓它們顯示為一個更大的箭頭而不是兩個無亮點有亮點我的代碼 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 回答
斯蒂芬大帝
TA貢獻1827條經(jīng)驗 獲得超8個贊
為什么不直接創(chuàng)建兩個單獨的標記定義并顯示正確的定義呢？您可以將標記的 ID 與變量交換，就像您對描邊顏色所做的那樣或使用 CSS。
注意：我必須將markerWidth、markerHeight、refX、 和refY乘以比例才能使其發(fā)揮作用。我認為原因在于 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
- 1 回答
- 0 關(guān)注
- 119 瀏覽
添加回答
舉報
0/150
提交
取消