Штрих SVG не отображается внутри clipPath

У меня есть следующий Codepen, где я пытаюсь анимировать штрих круг вокруг изображения.

Пока что у меня есть круг SVG, который обрезает изображение, но не показывает штрих внутри clipPath.

Как сделать, чтобы граница отображалась?

class App extends React.Component {
  render() {
    return (
      <svg width='48' height='48'>
        <defs>
          <clipPath id='circleView'>
            <circle cx='24' cy='24' r='23' fill='none' stroke='red' strokeWidth='2' />
          </clipPath>
        </defs>
        <image width='48' height='48' xlinkHref={'https://source.unsplash.com/random'} clipPath='url(#circleView)' />
      </svg>
    )
  }
}

reactjs svg border stroke
person A7DC    schedule 29.01.2019    source источник
comment
необработанная геометрия каждого дочернего элемента без учета свойств рендеринга, таких как 'fill', ' штрих», «ширина штриха» в «clipPath» концептуально определяет 1-битную маску (с возможным исключением сглаживания вдоль края геометрии), которая представляет силуэт графики, связанной с этим элементом   -  person Robert Longson    schedule 30.01.2019

Ответы (1)


arrow_upward
5
arrow_downward

Как сказал Роберт, дочерние цифры SVG в строке clip-path не отображаются.

Поэтому для анимации нужно добавить еще один круг вне clip-path

<circle cx="25" cy="24" r="14" fill="none" stroke="red" strokeWidth="2" /> 

.container {
    width:25%;
	height:25%;
   }
<div class="container">
	  <svg  viewBox="0 0 48 48" >
        <defs>
          <clipPath id='circleView'>
            <circle cx='24' cy='22' r='16' fill='none' stroke='red' stroke-width='2' />
          </clipPath>
        </defs>
        <image width="100%" height="100%"   xlink:href='https://i.stack.imgur.com/O9eO8.jpg' 
     		clip-path='url(#circleView)' />
  <circle cx='24' cy='22' r='16' fill='none' stroke='red' strokeWidth='2' /> 
</svg>
  </div>

Чтобы оживить круг, используйте изменение атрибута stroke-dashoffset с максимума на ноль. values="(100.48;0)"

Анимация начинается после клика

.container {
    width:25%;
	height:25%;
   }
<div class="container">
	  <svg id="svg1" viewBox="0 0 48 48">
        <defs>
          <clipPath id='circleView'>
     <circle cx='24' cy='22' r='16' fill='none' stroke='red' stroke-width='2' />
          </clipPath>
        </defs>
        <image width="100%" height="100%" xlink:href='https://i.stack.imgur.com/O9eO8.jpg' clip-path='url(#circleView)' />
	<circle  transform="rotate(-90 24 22)" cx="24" cy="22" r="16" fill='none' stroke='red' strokeWidth='2' 
    		stroke-dasharray="100.48"   stroke-dashoffset="100.48" >
            <animate
              attributeName="stroke-dashoffset"
              dur="1s"
              begin="svg1.click"
              values="100.48;0"
              fill="freeze"/>
	</circle>		
      </svg>

  </div>

Вариант анимации с CSS

Я добавил анимацию прозрачности к анимации круга.

Анимация начинается при наведении курсора мыши.

.container {
    width:25%;
	height:25%;
   }  
   #crc1 {
   fill:skyblue;
   stroke-width:1;
   stroke:red;
   stroke-dasharray:100.48;
   stroke-dashoffset:100.48;
    fill-opacity:0.9;
     }
   
   #crc1:hover {
    animation: dash 1.5s ease-out forwards;
      }
	  
    @keyframes dash {
  0% { stroke-dashoffset: 100.48; fill-opacity:0.9; }
  50% { fill-opacity:0.45;}
  100% { stroke-dashoffset: 0; fill-opacity:0; }
   }
   
   #img1 {
   clip-path: url(#circleView);
     }
<div class="container">
	  <svg id="svg1" viewBox="0 0 48 48">
        <defs>
          <clipPath id='circleView'>
            <circle cx='24' cy='22' r='16'/>
          </clipPath>
        </defs>
        <image width="100%" height="100%" xlink:href='https://i.stack.imgur.com/O9eO8.jpg' 
     		clip-path='url(#circleView)' />
         <circle id="crc1"   cx="24" cy="22" r="16" />
        		
      </svg>

  </div>

person Alexandr_TT    schedule 30.01.2019