Изображение SVG внутри круга

190

14 марта 2017, 12:39

Я хочу создать круг, внутри которого находится изображение. Я уже пробовал использовать pattern или filter, но ни один из них не дает ожидаемого результата.

Ниже приведен код:

<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 background-image.

Перевод вопроса: SVG image inside circle

Answer 1

pattern будет работать. Вам просто необходимо указать размер <image>, так как в отличии от HTML, SVG-изображения по умолчанию имеют ширину и высоту отличающуюся от нуля.
Кроме того, если вы хотите, чтобы изображение масштабировалось вместе с кругом, то вам следует указать viewBox для 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>