Как добавить рамку к изображению внутри SVG-круга - PullRequest
Новая
       58

Как добавить рамку к изображению внутри SVG-круга

0 голосов
/ 31 января 2019

Я анимирую обводку по кругу с помощью GSAP.Вот код Codepen .

. Я хочу сделать интервал между внешним розовым и (что должно быть) внутренним круглым изображением, например:

enter image description here

Вот мой SVG-код: 

      <svg id='svg1' width='48' height='48' viewBox='0 0 48 48'>
        <defs>
          <clipPath id='circleView'>
            <circle cx='24' cy='24' r='22' fill='none' stroke='#FF62E1' strokeWidth='2' />
          </clipPath>
        </defs>
        <image
          width='100%'
          height='100%'
          xlinkHref={'https://source.unsplash.com/random'}
          clipPath='url(#circleView)'
          />
        <circle
          cx='24'
          cy='24'
          r='22'
          fill='none'
          stroke='#FF62E1'
          strokeWidth='2'
          strokeDasharray='100.48'
          strokeDashoffset='100.48'
          // @ts-ignore
          ref={(circle) => { this.circle = circle }} >
          >
        </circle>
      </svg>

Я играл с filter и использовал несколько кругов для создания эффекта,но безрезультатно.

Есть идеи, как этого добиться?

1 Ответ

0 голосов
/ 31 января 2019

Вы можете изменить радиус круга clipPath, чтобы он был немного меньше другого круга, и использовать квадратное изображение, чтобы оно идеально подходило. 

render() {
  return (
    <svg id='svg1'  viewBox='0 0 48 48'>
      <defs>
        <clipPath id='circleView'>
          <circle cx='24' cy='24' r='18' fill='none' stroke='#FF62E1' strokeWidth='2' />
        </clipPath>
      </defs>
      <image
        x="0"
        y="0"
        width='48'
        height='48'
        xlinkHref={'https://source.unsplash.com/random/1500x1500/'}
        clipPath='url(#circleView)'
      />
      <circle
        cx='24'
        cy='24'
        r='22'
        fill='none'
        stroke='#FF62E1'
        strokeWidth='2'
        // @ts-ignore
        ref={(circle) => { this.circle = circle }} >
      </circle>
    </svg>
    )
  }
}

Codepen

Эта опция оставляет прозрачный промежуток, где виден фон, поэтому может быть, а может и не быть именно тем, что вы хотите.Альтернативой является создание еще одного круга с обводкой, но без заливки сверху с другим радиусом.

Альтернативный кодовый указатель

...