reactjs - 如何在 React 中使用 svg 填充 url

Question

代码如下:

<div className="flex flex-wrap -mx-2 mb-8">
            {props &&
                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 看起来像这样。

Answer 1

您应该正确插入字符串模板。

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

url 是对 SVG 中另一个标识符的引用，在本例中为线性渐变

和

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

min 本身不是函数，请务必通过调用 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>