如何使用 SVG 触发 HTML 选择标签打开答案

【问题标题】：How to use an SVG to trigger a HTML select tag to open如何使用 SVG 触发 HTML 选择标签打开
【发布时间】：2022-12-04 15:02:02
【问题描述】：

我正在使用 SVG 替换选定 html 标记上的默认箭头。但是，如果我将 SVG 放在选择标签栏中。它阻止了单击其下方的选择栏的能力。我是 NextJs，拥有 Tailwind 和 Heroicons

<select
          htmlFor="selector"
          name="selected"
          className="w-full p-2.5 border-2 border-gray-500 rounded-md outline-none text-black cursor-pointer appearance-none"
        >
          {/* //leave as the default text// */}
          <option disabled selected value>
            {" "}
            -- Select a cycle --{" "}
          </option>

          {/* //dummy options//fill with data pull// */}
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <span className="absolute bottom-9 left-2 px-1 border-l-2 border-r-2 border-white bg-white text-gray-500">
          Cycle
        </span>
        {/* //down arrow// */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          className="w-5 h-5 absolute right-2 top-3.5 text-gray-500 "
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
          />
        </svg>

如果你能帮助我，请告诉我向下箭头 SVG 如何也可以打开它位于其顶部的选择标签

【问题讨论】：

标签： html reactjs svg next.js tailwind-css

【解决方案1】：

给 SVG 一个 pointer-events: none 属性。

<select
          htmlFor="selector"
          name="selected"
          className="w-full p-2.5 border-2 border-gray-500 rounded-md outline-none text-black cursor-pointer appearance-none"
        >
          {/* //leave as the default text// */}
          <option disabled selected value>
            {" "}
            -- Select a cycle --{" "}
          </option>

          {/* //dummy options//fill with data pull// */}
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <span className="absolute bottom-9 left-2 px-1 border-l-2 border-r-2 border-white bg-white text-gray-500">
          Cycle
        </span>
        {/* //down arrow// */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          className="w-5 h-5 absolute right-2 top-3.5 text-gray-500 "
          style={{pointerEvents: 'none'}}
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
          />
        </svg>

这将意味着点击“穿过”元素。

【讨论】：