SVG 图像不显示答案

【问题标题】：SVG Image does not showSVG 图像不显示
【发布时间】：2021-01-11 12:22:26
【问题描述】：

各位大侠们，

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

    <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>

我是缺少一个属性还是其他什么？我不明白为什么图片没有显示出来。

【问题讨论】：

你是否使用 react 来渲染这个组件？
@AbishekKumar 是的，我愿意。
使用href 而不是xlinkHref（见developer.mozilla.org/en-US/docs/Web/SVG/Element/…）
@yunzen 我改了。但它们是相同的，所以没有解决问题。

标签： javascript html reactjs svg

【解决方案1】：

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

  <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>

【讨论】：