Строка SVG не отображается внутри clipPath

15 сентября 2019, 05:20

У меня есть следующий 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> ) } }

Answer 1

Как сказал Robert у дочерних фигур SVG входящих в clip-path строки не отображаются.

Поэтому в этом конкретном случае

<clipPath id='circleView'> <circle cx='24' cy='24' r='23' fill='none' stroke='red' strokeWidth='2' /> </clipPath>

у дочернего элемента <circle> красная строка stroke='red' будет не видна

Для анимации необходимо добавить ещё одну окружность вне 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>

Вариант анимации картинок в галерее 3х3

Примечание
Этого примера нет на Enso

Принцип действия тот же, что и для одиночного примера. Пример может быть использован, как заготовка для своего веб дизайна.

Приложение адаптивно, но лучше смотреть в полно экранном варианте.

body { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
} 
div { 
  width: 32vw; 
  height: 32vw; 
  margin: 0.5vw auto; 
  background: #FFDD1B; 
}  
 
   #crc1 { 
   fill:skyblue; 
   stroke-width:1; 
   stroke:red; 
   stroke-dasharray:100.55; 
   stroke-dashoffset:100.55; 
    fill-opacity:0.95; 
     } 
    
   #crc1:hover { 
    animation: dash 1.5s ease-out forwards; 
      } 
	   
    @keyframes dash { 
  0% { stroke-dashoffset: 100.55; fill-opacity:0.95; } 
  50% { fill-opacity:0.45;} 
  100% { stroke-dashoffset: 0; fill-opacity:0; } 
   } 
    
   #img1 { 
   clip-path: url(#circleView); 
     }

<div>  
  <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> 
  <div>  
      <svg id="svg1" viewBox="0 0 48 48"> 
        <defs> 
          <clipPath id='circleView'> 
            <circle cx='24' cy='22' r='16'/> 
          </clipPath> 
        </defs> 
        <image  y="2" width="100%" height="100%" xlink:href='https://i.stack.imgur.com/5BhWN.jpg'  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
  </div>  
     <div>  
      <svg id="svg1" viewBox="0 0 48 48"> 
        <defs> 
          <clipPath id='circleView'> 
            <circle cx='24' cy='22' r='16'/> 
          </clipPath> 
        </defs> 
        <image y="5" width="100%" height="100%" xlink:href='https://i.stack.imgur.com/nLC1p.jpg'  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
    </div> 
        
	<div>  
      <svg id="svg1" viewBox="0 0 48 48"> 
        <defs> 
          <clipPath id='circleView'> 
            <circle cx='24' cy='22' r='16'/> 
          </clipPath> 
        </defs> 
        <image x="1" y="4" width="100%" height="100%" xlink:href='https://i.stack.imgur.com/FArvR.jpg'  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
    </div>	 
        
   <div>  
      <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/4JK8h.jpg'  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
    </div>	 
	 
	<div>  
      <svg id="svg1" viewBox="0 0 48 48"> 
        <defs> 
          <clipPath id='circleView'> 
            <circle cx='24' cy='22' r='16'/> 
          </clipPath> 
        </defs> 
        <image y="2" width="100%" height="100%" xlink:href='https://i.stack.imgur.com/eROf7.jpg'  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
    </div>   
 
	<div>  
      <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://cdn.fishki.net/upload/post/201408/25/1297423/37.jpg'  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
    </div>	 
	 
	<div>  
      <svg id="svg1" viewBox="0 0 48 48"> 
        <defs> 
          <clipPath id='circleView'> 
            <circle cx='24' cy='22' r='16'/> 
          </clipPath> 
        </defs> 
        <image y="6" width="100%" height="100%" xlink:href="https://cdn.fishki.net/upload/post/201408/25/1297423/32.jpg"  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
    </div>	 
	 
	<div>  
      <svg id="svg1" viewBox="0 0 48 48"> 
        <defs> 
          <clipPath id='circleView'> 
            <circle cx='24' cy='22' r='16'/> 
          </clipPath> 
        </defs> 
       <image y="0" width="100%" height="100%" xlink:href='https://cdn.fishki.net/upload/post/201408/25/1297423/26.jpg'  
     		clip-path='url(#circleView)' /> 
         <circle id="crc1"   cx="24" cy="22" r="16" /> 
      </svg>   
    </div>

Источник ответа @Alexandr_TT