如何为SVG形状添加平方根相关的非线性渐变

SVG原生仅提供linearGradient（线性渐变）和radialGradient（径向渐变）两类内置渐变，没有开放直接自定义渐变坐标映射函数的官方API，但可以通过两种成熟方案实现你要的平方根映射渐变效果：

• 方案1：预生成色标实现自定义映射
  你可以先按照平方根函数的计算结果，手动生成线性渐变的<stop>色标节点，把原本线性分布的offset值替换为平方根映射后的偏移值即可。采样的色标数量越多，渐变过渡越平滑，一般设置20个以上色标就不会有明显的阶梯感。
  示例代码如下：

  <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 平方根映射的线性渐变，色标offset按sqrt(x)预计算 -->
      <linearGradient id="sqrtGradient" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#000000"/>
        <stop offset="10%" stop-color="#191919"/>
        <stop offset="14%" stop-color="#242424"/>
        <stop offset="17%" stop-color="#2d2d2d"/>
        <stop offset="22%" stop-color="#383838"/>
        <stop offset="26%" stop-color="#424242"/>
        <stop offset="30%" stop-color="#4c4c4c"/>
        <stop offset="35%" stop-color="#595959"/>
        <stop offset="40%" stop-color="#666666"/>
        <stop offset="45%" stop-color="#737373"/>
        <stop offset="50%" stop-color="#808080"/>
        <stop offset="55%" stop-color="#8d8d8d"/>
        <stop offset="60%" stop-color="#999999"/>
        <stop offset="67%" stop-color="#ababab"/>
        <stop offset="75%" stop-color="#bfbfbf"/>
        <stop offset="82%" stop-color="#d1d1d1"/>
        <stop offset="90%" stop-color="#e6e6e6"/>
        <stop offset="100%" stop-color="#ffffff"/>
      </linearGradient>
    </defs>
    <rect width="200" height="100" fill="url(#sqrtGradient)"/>
  </svg>
  

• 方案2：用SVG滤镜实现实时动态映射
  如果你需要动态调整映射逻辑，不想手动生成大量色标，可以基于普通线性渐变搭配<feComponentTransfer>滤镜实现实时色值映射。你只需要在滤镜的RGB通道映射表中填入平方根函数的采样结果即可，256个采样点即可实现完全平滑的渐变效果。
  示例代码如下：

  <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="baseLinear" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#000"/>
        <stop offset="100%" stop-color="#fff"/>
      </linearGradient>
      <filter id="sqrtFilter">
        <!-- tableValues可通过JS预计算生成，无需手动填写 -->
        <feComponentTransfer>
          <feFuncR type="table" tableValues="0 0.0626 0.0885 0.1086 0.1253 0.14 0.1531 0.165 0.1759 0.186 0.1954 0.2043 0.2127 0.2206 0.2282 0.2354 0.2423 0.2489 0.2553 0.2614 0.2673 0.273 0.2785 0.2838 0.2889 0.2939 0.2987 0.3034 0.3079 0.3123 0.3166 0.3208 0.3249 0.3289 0.3328 0.3366 0.3403 0.344 0.3475 0.351 0.3544 0.3578 0.361 0.3642 0.3674 0.3704 0.3735 0.3764 0.3793 0.3821 0.3849 0.3876 0.3903 0.393 0.3956 0.3981 0.4006 0.4031 0.4055 0.4079 0.4103 0.4126 0.4149 0.4171 0.4193 0.4215 0.4237 0.4258 0.4279 0.43 0.432 0.434 0.436 0.438 0.4399 0.4418 0.4437 0.4456 0.4475 0.4493 0.4511 0.4529 0.4547 0.4564 0.4582 0.4599 0.4616 0.4633 0.4649 0.4666 0.4682 0.4698 0.4714 0.473 0.4746 0.4761 0.4777 0.4792 0.4807 0.4822 0.4837 0.4852 0.4867 0.4881 0.4896 0.491 0.4924 0.4938 0.4952 0.4966 0.498 0.4993 0.5007 0.502 0.5034 0.5047 0.506 0.5073 0.5086 0.5099 0.5112 0.5125 0.5137 0.515 0.5162 0.5175 0.5187 0.5199 0.5211 0.5223 0.5235 0.5247 0.5259 0.527 0.5282 0.5294 0.5305 0.5317 0.5328 0.5339 0.535 0.5362 0.5373 0.5384 0.5395 0.5406 0.5416 0.5427 0.5438 0.5448 0.5459 0.5469 0.548 0.549 0.5501 0.5511 0.5521 0.5531 0.5541 0.5551 0.5561 0.5571 0.5581 0.5591 0.56 0.561 0.562 0.5629 0.5639 0.5648 0.5658 0.5667 0.5677 0.5686 0.5695 0.5704 0.5714 0.5723 0.5732 0.5741 0.575 0.5759 0.5768 0.5777 0.5786 0.5795 0.5804 0.5812 0.5821 0.583 0.5838 0.5847 0.5856 0.5864 0.5873 0.5881 0.589 0.5898 0.5907 0.5915 0.5923 0.5932 0.594 0.5948 0.5956 0.5965 0.5973 0.5981 0.5989 0.5997 0.6005 0.6013 0.6021 0.6029 0.6037 0.6045 0.6053 0.606 0.6068 0.6076 0.6084 0.6092 0.6099 0.6107 0.6115 0.6122 0.613 0.6138 0.6145 0.6153 0.616 0.6168 0.6175 0.6183 0.619 0.6198 0.6205 0.6212 0.622 0.6227 0.6234 0.6242 0.6249 0.6256 0.6263 0.6271 0.6278 0.6285 0.6292 0.6299 0.6306 0.6313 0.632 0.6327 0.6334 0.6341 0.6348 0.6355 0.6362 0.6369 0.6376 0.6383 0.639 0.6397 0.6403 0.641 0.6417 0.6424 0.6431 0.6437 0.6444 0.6451 0.6458 0.6464 0.6471 0.6478 0.6484 0.6491 0.6498 0.6504 0.6511 0.6517 0.6524 0.6531 0.6537 0.6544 0.655 0.6557 0.6563 0.657 0.6576 0.6583 0.6589 0.6595 0.6602 0.6608 0.6615 0.6621 0.6627 0.6634 0.664 0.6646 0.6653 0.6659 0.6665 0.6672 0.6678 0.6684 0.669 0.6696 0.6703 0.6709 0.6715 0.6721 0.6727 0.6733 0.6739 0.6745 0.6752 0.6758 0.6764 0.677 0.6776 0.6782 0.6788 0.6794 0.68 0.6806 0.6812 0.6818 0.6824 0.683 0.6836 0.6842 0.6847 0.6853 0.6859 0.6865 0.6871 0.6877 0.6883 0.6889 0.6894 0.69 0.6906 0.6912 0.6918 0.6924 0.6929 0.6935 0.6941 0.6947 0.6952 0.6958 0.6964 0.697 0.6975 0.6981 0.6987 0.6992 0.6998 0.7004 0.701 0.7015 0.7021 0.7027 0.7032 0.7038 0.7043 0.7049 0.7055 0.706 0.7066 0.7071 0.7077 0.7083 0.7088 0.7094 0.7099 0.7105 0.711 0.7116 0.7121 0.7127 0.7132 0.7138 0.7143 0.7149 0.7154 0.716 0.7165 0.7171 0.7176 0.7181 0.7187 0.7192 0.7198 0.7203 0.7208 0.7214 0.7219 0.7224 0.723 0.7235 0.724 0.7246 0.7251 0.7256 0.7261 0.7267 0.7272 0.7277 0.7282 0.7288 0.7293 0.7298 0.7303 0.7308 0.7313 0.7319 0.7324 0.7329 0.7334 0.7339 0.7344 0.7349 0.7354 0.7359 0.7364 0.7369 0.7375 0.738 0.7385 0.739 0.7395 0.74 0.7405 0.741 0.7415 0.742 0.7425 0.743 0.7435 0.744 0.7444 0.7449 0.7454 0.7459 0.7464 0.7469 0.7474 0.7479 0.7484 0.7489 0.7494 0.7499 0.7504 0.7509 0.7513 0.7518 0.7523 0.7528 0.7533 0.7538 0.7543 0.7547 0.7552 0.7557 0.7562 0.7567 0.7572 0.7576 0.7581 0.75