Question

嗨，其他溢出者，

我有以下代码尝试显示带有边框的图像。但不幸的是，它无法正常工作。

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

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

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

SVG图片未显示

1 个答案: