如何在SVG路径中添加图片并调整路径内文本的旋转与位置？

一、给Path元素添加内部图片 #

通过SVG的<pattern>标签定义图片填充模板，将其放入<defs>中，即可为扇区路径设置图片填充：

• 每个扇区对应唯一的<pattern>，设置patternUnits="userSpaceOnUse"确保尺寸基于SVG坐标系
• 调整<image>的尺寸和<pattern>的viewBox，保证图片在扇区内适配显示；可选添加opacity属性，让图片与扇区底色叠加显示

二、调整文本旋转与贴近路径边缘 #

针对文本显示的问题，需要做以下关键调整：

• 为每个扇区的文本路径设置唯一ID，避免ID冲突导致文本显示异常
• 利用textPath的startOffset="50%"让文本在扇区居中
• 通过dy属性调整文本与路径外边缘的距离，设置textAnchor="middle"保证文本对齐
• 移除错误的强制旋转，让文本自然贴合扇区路径方向，保证可读

修改后的React组件代码 #

const RouletteWheel = () => {
  const items = ["item1", "item2", "item3", "item4"];
  const colors = ["blue", "red", "green", "yellow", "brown", "purple"];
  // 示例图片地址，替换为实际图片URL即可
  const imageUrls = [
    "https://picsum.photos/200/200?random=1",
    "https://picsum.photos/200/200?random=2",
    "https://picsum.photos/200/200?random=3",
    "https://picsum.photos/200/200?random=4"
  ];

  const numItems = items.length;
  const angle = items.length === 1 ? 0 : 360 / numItems;

  return (
    <svg viewBox="0 0 100 100" className="svg-wheel">
      {items.length > 1 ? (
        items.map((item, index) => {
          const x1 = 50 + 45 * Math.cos(angle * index * (Math.PI / 180));
          const y1 = 50 + 45 * Math.sin(angle * index * (Math.PI / 180));
          const x2 = 50 + 45 * Math.cos(angle * (index + 1) * (Math.PI / 180));
          const y2 = 50 + 45 * Math.sin(angle * (index + 1) * (Math.PI / 180));
          const sectorPath = `M 50 50 L ${x1} ${y1} A 45 45 0 0 1 ${x2} ${y2} Z`;

          return (
            <React.Fragment key={`sector-${index}`}>
              <defs>
                {/* 定义图片填充模板 */}
                <pattern
                  id={`pattern-${index}`}
                  patternUnits="userSpaceOnUse"
                  width="90"
                  height="90"
                  x="5"
                  y="5"
                  viewBox="0 0 100 100"
                >
                  <image
                    href={imageUrls[index]}
                    width="100"
                    height="100"
                    opacity="0.7"
                  />
                </pattern>
                {/* 定义唯一的文本路径 */}
                <path id={`text-path-${index}`} d={sectorPath} />
              </defs>
              {/* 带图片填充的扇区路径 */}
              <path
                id={`path-${index}`}
                d={sectorPath}
                fill={`url(#pattern-${index})`}
                stroke="#000"
                strokeWidth="0.5"
              ></path>
              {/* 调整后的文本 */}
              <text fill="white" fontSize={4} fontWeight="bold">
                <textPath
                  href={`#text-path-${index}`}
                  startOffset="50%"
                  dy="-2"
                  textAnchor="middle"
                >
                  {item}
                </textPath>
              </text>
            </React.Fragment>
          );
        })
      ) : (
        <circle key={"circle"} cx="50" cy="50" r="45" fill="url(#pattern1)" />
      )}
    </svg>
  );
};

ReactDOM.render(
  RouletteWheel(),
  document.getElementById('container')
);

对应的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="container"></div>

内容的提问来源于stack exchange，提问作者sam