Блог

Вот код:

 <div className="flex flex-wrap -mx-2 mb-8">
            {props amp;amp;
                props.item.map((data, i) => (
                    <div
                        key={i}
                        className="w-full md:w-1/2 lg:w-1/4 px-2 mb-4 flex rounded justify-center items-center p-2 m-1"
                    >
                        <h1>abc</h1>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="100px"
                            height="140"
                            fill={url(`#color-${i}`)}
                            viewBox="0 0 30 45"
                            aria-hidden="true"
                            style={{ transform: `translate(0, -20px)` }}
                        >
                            <defs>
                                <linearGradient id={`color-${i}`} x1="0%" y1="100%" x2="0%" y2="0%">
                                    <stop offset={`${min(7, threshold)}%`} stop-color="rgb(40, 134, 248)" />
                                    <stop offset={`${data.humidity}%`} stop-color="rgb(255, 0, 0)" />
                                    <stop stop-color="rgb(227, 227, 227)" />
                                </linearGradient>
                            </defs>

                            <path stroke="#2886f8" d="M15 6 
                                   Q 15 6, 25 18
                                   A 12.8 12.8 0 1 1 5 18
                                   Q 15 6 15 6z" />
                        </svg>
                    </div>

                ))}
        </div>
 

То, что я пытаюсь здесь сделать, это заполнить LinearGradient . но проблема заключается в том, когда я пытаюсь это сделать:

<svg fill={url(#color-${i})}> это не работает. ошибка заключается в том, что не удается найти имя ‘url’. варианты импорта следующие import { url } from 'inspector'; .

вызвать svg это выглядит так.

Вы должны правильно интерполировать шаблоны строк.

 fill={`url(#color-${i})`}
 

Это url ссылка на другой идентификатор в SVG, в данном случае на линейный градиент

и

 offset={`${Math.min(7, data.threshold)}%`}
 

min alone — это не функция, обязательно полностью определите ее, вызвав Math.min

Код

 <div className="flex flex-wrap -mx-2 mb-8">
  {props.item.map((data, i) => (
    <div
      key={i}
      className="w-full md:w-1/2 lg:w-1/4 px-2 mb-4 flex rounded justify-center items-center p-2 m-1"
    >
      <h1>abc</h1>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="100px"
        height="140"
        fill={`url(#color-${i})`}
        viewBox="0 0 30 45"
        aria-hidden="true"
        style={{ transform: `translate(0, -20px)` }}
      >
        <defs>
          <linearGradient
            id={`color-${i}`}
            x1="0%"
            y1="100%"
            x2="0%"
            y2="0%"
          >
            <stop
              offset={`${Math.min(7, data.threshold)}%`}
              stop-color="rgb(40, 134, 248)"
            />
            <stop
              offset={`${data.humidity}%`}
              stop-color="rgb(255, 0, 0)"
            />
            <stop stop-color="rgb(227, 227, 227)" />
          </linearGradient>
        </defs>

        <path
          stroke="#2886f8"
          d="M15 6 
                              Q 15 6, 25 18
                              A 12.8 12.8 0 1 1 5 18
                              Q 15 6 15 6z"
        />
      </svg>
    </div>
  ))}
</div>