React+Tailwind CSS中调整SVG路径实现指定箭头布局

• 基于React+Tailwind开发Discovery Response组件，右侧箭头区域的第三个箭头样式不符合设计要求
• 设计需求：
  1. 将右侧的竖线左移
  2. 除第三个箭头外，其余箭头的尾部都止于竖线交点
  3. 第三个箭头的尾部要穿过竖线，形成类似加号的样式

当前实现效果：右侧竖线位置偏右，所有箭头尾部都与竖线对齐，第三个箭头没有穿过竖线的效果。
目标效果：竖线左移，前两个和后续箭头尾部到竖线就停止，第三个箭头的尾部延伸穿过竖线，在竖线另一侧露出一段，形成加号样式。

当前代码 #

// DiscoveryResponse.jsx

import { useState } from 'react';
import Heading from '../Heading/Heading';
import DiscoveryButton from '../DiscoveryButton/DiscoveryButton';
import { responses } from './discoveryResponses'; // Adjust path as necessary
import { buttonNames } from '../DiscoveryButton/buttonNames';
import './DiscoveryResponse.css'

const DiscoveryResponse = () => {
  const [activeResponse, setActiveResponse] = useState(0);

  const handleButtonClick = (index) => {
    setActiveResponse(index);
  };

  return (
    <section className="py-12 px-4 md:px-40">
      <div className="text-center pt-4 pb-8">
        <Heading title="Discovery Response Generator (Discovery Workflow)" titleFirst={true} />
      </div>

{/*PARENT FOR GRIDS  */}
      <div className="grid grid-cols-1 md:grid-cols-[30%_35%_35%] py-10 gap-10">
        {/* Left Side (Image Display) */}
        <div className="hidden md:block">
          <img
            src={responses[activeResponse].image}
            alt="Feature"
            className="w-full h-auto border-2 border-l-0 border-black p-0 m-0"
          />
        </div>

        {/* Center (Text Display) */}
        <div className="flex items-center justify-center border-2 border-gray-200 rounded-2xl">
          <div className="overflow-auto" style={{ maxHeight: '400px' }}>
            <h1 className="text-lg p-4">{buttonNames[activeResponse]}</h1>
            <p className="text-lg p-4">{responses[activeResponse].text}</p>
          </div>
        </div>


        {/* RIGHT SIDE PLAY WITH */}
<div className="grid grid-cols-[80%_20%] relative">
  {/* Button Grid */}
  <div className="grid grid-cols-1 items-start border-2 space-y-4">
    {responses.map((response, index) => (
      <DiscoveryButton
        key={index}
        index={index}
        active={activeResponse === index}
        onClick={handleButtonClick}
      />
    ))}
  </div>

  {/* Navigation Arrows */}
  <div className="grid grid-cols-1 mt-2 pl-2 border-2 justify-center relative">
    {responses.map((response, index) => (
        // VERTICAL LINE HERE
      <div key={index} className="relative w-full pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] bg-[position:0_calc((theme(fontSize.base.1.lineHeight)*.5)-1px+var(--pt)),100%_var(--y,0%)] bg-[length:100%_2px,2px_var(--h,100%)] bg-no-repeat [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:calc(theme(fontSize.base.1.lineHeight)*.5)] last:[--h:calc((theme(fontSize.base.1.lineHeight)*.5)+var(--pt))]">

        {/* Poistioning of Arrow head */}
        <svg className="translate-y-[calc((theme(fontSize.base.1.lineHeight)-24px)*.75)]" width="16.8" height="24" viewBox="0 0 16.8 24" fill="none">

            {/* ARROW HEAD HERE */}
            <path d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z" fill="currentColor"/>        
            </svg>
      </div>
    ))}
  </div>



  
</div>



      </div>

      
    </section>
  );
};

export default DiscoveryResponse;

核心修改点：

1. 调整竖线的位置，从右侧边缘左移到指定位置
2. 针对第三个箭头（索引为2，从0开始计数），单独设置其横向箭头线的长度，让它穿过竖线
3. 给第三个箭头额外添加一段穿过竖线的线条，实现加号效果

修改后的右侧箭头区域代码如下：

{/* RIGHT SIDE PLAY WITH */}
<div className="grid grid-cols-[80%_20%] relative">
  {/* Button Grid */}
  <div className="grid grid-cols-1 items-start border-2 space-y-4">
    {responses.map((response, index) => (
      <DiscoveryButton
        key={index}
        index={index}
        active={activeResponse === index}
        onClick={handleButtonClick}
      />
    ))}
  </div>

  {/* Navigation Arrows */}
  <div className="grid grid-cols-1 mt-2 pl-2 border-2 justify-center relative">
    {responses.map((response, index) => {
      const isThirdArrow = index === 2;
      return (
        <div 
          key={index} 
          className={`relative w-full pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] 
            bg-[position:0_calc((theme(fontSize.base.1.lineHeight)*.5)-1px+var(--pt)),70%_var(--y,0%)] 
            bg-[length:${isThirdArrow ? '120%' : '70%'}_2px,2px_var(--h,100%)] 
            bg-no-repeat 
            [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:calc(theme(fontSize.base.1.lineHeight)*.5)] last:[--h:calc((theme(fontSize.base.1.lineHeight)*.5)+var(--pt))]`}
        >
          {/* Poistioning of Arrow head */}
          <svg className="translate-y-[calc((theme(fontSize.base.1.lineHeight)-24px)*.75)]" width="16.8" height="24" viewBox="0 0 16.8 24" fill="none">
            {/* ARROW HEAD HERE */}
            <path d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z" fill="currentColor"/>        
          </svg>
          {/* 第三个箭头的加号延伸线 */}
          {isThirdArrow && (
            <div className="absolute top-1/2 -translate-y-1/2 left-[70%] w-[30%] h-0.5 bg-black"></div>
          )}
        </div>
      )
    })}
  </div>
</div>

修改说明：

• 竖线位置从100%改为70%，实现左移效果，可根据实际布局微调该百分比
• 非第三个箭头的横向线条长度设为70%，刚好到竖线位置停止
• 第三个箭头的横向线条长度设为120%，同时额外添加一段从竖线位置（70%）向右延伸30%的黑色短线，组合成加号样式
• 若需要更精准的对齐，可调整70%、120%、30%这些百分比数值

内容的提问来源于stack exchange，提问作者Muhammad Omer Baig