4

Я хочу создать круг, внутри которого находится изображение. Я уже пробовал использовать 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 от участника @Bla.

2
  • 1
    ассоциация: stackoverflow.com/questions/29442833/svg-image-inside-circle/… 12 мар 2017 в 19:49
  • В комментариях три года назад выражали сомнение будет ли использоваться SVG. Используется и поддержка расширяется. В Chrome убрали depricate, так как до сих пор не нашли полноценной замены для SVG. Данный вопрос по ассоциации и ответ довольно простые, но актуальные и этот прием (изображение в круге) широко используется . 21 сен 2020 в 17:14

1 ответ 1

4

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>

Свободный перевод ответа от участника @Paul LeBeau.

3
  • А правда, что Chrome хочет отказаться от поддержки SMIL? Вроде ведь уже внедренная технология.
    – labris
    12 мар 2017 в 17:34
  • 1
    @ labris Chrome Временно отложил отказ поддержки SMIL ещё в августе прошлого года. Было очень бурное обсуждение в блоге разработчиков Chrome. Пока отложили, но надеюсь, что как всегда, нет ничего более постоянного, чем временное 12 мар 2017 в 17:42
  • 1
    Я думала вообще smil похоронили, радует что отложили, хотя поддержка и сомнительная, но для чего-нибудь на codepen в самый раз
    – SVE
    12 мар 2017 в 19:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.