SVG中居中的背景图像

永席尔瓦

我想在SVG中添加居中图像。

它将用作用户头像,但不这样做

.body {
  width: 100%;
  height: 100%;
  background: #1f1b33;
  padding: 2rem;
}

svg {
width: 120px;
}
<div class="body">
    <svg viewBox="0 0 121.375 125.397">
      <g
        id="blank"
        transform="translate(-1460.94 -927.887)"
      >
        <path
          id="wrapper"
          data-name="Caminho 2257"
          d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"
          transform="translate(1484.938 966.119)"
          fill="#fff"
          opacity="0.2"
        />
        <rect
          id="within"
          data-name="Retângulo 365"
          width="97"
          height="97"
          rx="37"
          transform="translate(1475 945)"
          fill="#fff"
        />
      </g>
    </svg>
  </div

我已经尝试在SVG内创建一个图像元素并将其引用为填充,但是图像未居中

有谁能够帮助我?

泽万

使用图案填充是一种方法-如果您的图像长宽比为正方形,则效果很好。请注意,图案的宽度和高度与矩形相同。在这种情况下,为简单起见,将模式填充设置为不patternUnitsuserSpaceOnUse其缩放到对象边界框很重要。

.body {
  width: 100%;
  height: 100%;
  background: #1f1b33;
  padding: 2rem;
}

svg {
  width: 120px;
}
<div class="body">
    <svg viewBox="0 0 121.375 125.397">
      <defs>
        <pattern id="patt" patternUnits="userSpaceOnUse" width="97" height="97">
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/17496/flace.jpg" width="97" height="97"></image>
        </pattern>
      </defs>
      <g
        id="blank"
        transform="translate(-1460.94 -927.887)"
      >
        <path
          id="wrapper"
          data-name="Caminho 2257"
          d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"
          transform="translate(1484.938 966.119)"
          fill="#fff"
          opacity="0.2"
        />
        <rect
          id="within"
          data-name="Retângulo 365"
          width="97"
          height="97"
          rx="37"
          transform="translate(1475 945)"
          fill="url(#patt)"
        />
      </g>
    </svg>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章