圈内的 SVG 图像 [英] SVG image inside circle

问题描述

我想创建一个包含图像的圆圈，我已经尝试使用 pattern 或 filter 但它们都没有给我预期的结果.代码如下:

I want to create a circle which contains an image, I already tried using pattern or filter but none of them give me the expected result. Below is the code:

<svg id="graph" width="100%" height="400px">

  <!-- filter -->
  <filter id = "born1" x = "0%" y = "0%" width = "100%" height = "100%">
      <feImage xlink:href = "https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"/>
  </filter>
  <circle id = "born" class = "medium" cx = "5%" cy = "20%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" filter = "url(#born1)"/>
  
  <!-- pattern -->
  <defs>
    <pattern id="image" x="0" y="0"  height="100%" width="100%">
      <image x="0" y="0" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
    </pattern>
  </defs>
  <circle id = "sd" class = "medium" cx = "5%" cy = "40%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" fill="url(#image)"/>
</svg>

我的目标是保留圆圈并在其中提供背景图像，例如 CSS attr background-image.

My goal is to preserve the circle and give background image inside it, something like CSS attr background-image.

推荐答案

一种模式会起作用.你只需要给 一个大小.与 HTML 不同，SVG 图像的宽度和高度默认为零.

A pattern will work. You just have to give the <image> a size. Unlike HTML, SVG images default to width and height of zero.

此外，如果您希望图像随圆圈一起缩放，那么您应该为图案指定一个 viewBox.

Also, if you want the image to scale with the circle, then you should specify a viewBox for the pattern.

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
    </pattern>
  </defs>
    
  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

这篇关于圈内的 SVG 图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！