Javascript SVG图像不显示

嘿，各位飞越者

我有以下代码试图显示带有边框的图像。但不幸的是，它不起作用

    <svg role="none" style={{ height: '32px', width: '32px' }}>
      <mask id="avatar">
        <circle cx="16" cy="16" fill="white" r="16" />
      </mask>
      <g mask="url(#avatar)">
        <image
          x="0"
          y="0"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
          width="100%"
          xlinkHref="/profile.png"
          style={{ height: '32px', width: '32px' }}
        />
        <circle cx="16" cy="16" r="16" />
      </g>
    </svg>

---

我是否缺少一个属性或其他属性？我不明白为什么图像没有显示。

我解决了它。我忘了在第二个圆圈中添加以下属性。这是新代码：

  <svg role="none" style={{ height: "32px", width: "32px" }}>
    <mask id="avatar">
      <circle cx="16" cy="16" fill="white" r="16" />
    </mask>
    <g mask="url(#avatar)">
      <image
        x="0"
        y="0"
        height="100%"
        preserveAspectRatio="xMidYMid slice"
        width="100%"
        href="/profile.png"
        style={{ height: "32px", width: "32px" }}
      />
      <circle
        cx="16"
        cy="16"
        r="16"
        strokeWidth={2}
        stroke="rgba(0, 0, 0, 0.1)"
        fill="none"
      />
    </g>
  </svg>

是否使用react渲染此组件？@AbishekKumar是的。使用

href

而不是

xlinkHref

（请参阅）@yunzen我更改了它。但它们是一样的，所以没有解决问题。