CSS svg hover анимация/переход

я использую клип-путь svg в качестве маски для изображения. Теперь мне нужна внутренняя граница внутри него при наведении. Поэтому я сделал второй клип-путь для наведения, но переход на него не влияет.

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

body {
	background: #ccc;
}

.clip-svg {
  position: relative;
	display: block;
	height: 400px;
	width: 300px;
	background-position: center center;
	background-size: auto 100%;
	clip-path: url(#Emblem);
	transition: 0.4s all ease;
}
.clip-svg:hover {
	clip-path: url(#Emblem2);
}

<div class="clip-svg" style="background-image: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="Emblem">
      <path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
    </clipPath>
	<clipPath id="Emblem2">
     <path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
		c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
	<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
		 M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
		c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
		l3.4,0.5V240z"/>
    </clipPath>
  </defs>
</svg>
<br/>
Image: <a href="https://www.pexels.com/photo/woman-wearing-white-top-holding-smartphone-and-tablet-864994/">https://www.pexels.com/...d-tablet-864994/</a>

заранее спасибо

Firehold 27.05.2018 источник

Ответы (2)

arrow_upward
0
arrow_downward

Я бы рассмотрел два слоя, каждый из которых использует clip-path, и я бы контролировал opacity:

body {
  background: #ccc;
}

.clip-svg {
  position: relative;
  display: inline-block;
  height: 400px;
  width: 300px;
}
.clip-svg::before,
.clip-svg::after {
   content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-position: center center;
  background-size: auto 100%;
  background-image: var(--i);
  transition: 0.8s all ease;
}

.clip-svg::before {
  clip-path: url(#Emblem2);
}

.clip-svg::after {
  clip-path: url(#Emblem);
}
.clip-svg:hover::after {
  opacity:0;
}

<div class="clip-svg" style="--i: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="Emblem">
      <path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
    </clipPath>
	<clipPath id="Emblem2">
     <path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
		c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
	<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
		 M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
		c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
		l3.4,0.5V240z"/>
    </clipPath>
  </defs>
</svg>

Temani Afif 27.05.2018

arrow_upward
0
arrow_downward

Я не вижу способа добиться того, чего вы хотите, используя пути обрезки в элементе HTML. Вы можете заменить только один путь клипа другим в CSS. Вы не можете интерполировать между двумя из них.

Однако это довольно легко сделать, если вы не против переместить изображение в SVG. Затем вы можете делать все, что хотите, с внутренней границей.

Однако обратите внимание, что в этом решении внутренняя граница не является путем обрезки, поэтому изображение не становится прозрачным. Не знаю, важно это для вас или нет. Это должно быть возможно сделать, если вам это действительно нужно.

body {
	background: #ccc;
}

.clip-svg .emblem2-ref {
  transform-origin: 150px 200px;
  transform: scale(1.2, 1.2);
	transition: 0.4s all ease;
}
.clip-svg:hover .emblem2-ref {
  transform: scale(1, 1);
}

#Emblem2 {
  fill: #ccc;
}

<!-- Clip path and inner border definitions. Can be included once and used by multiple SVGs -->
<svg width="0" height="0">
  <defs>
    <clipPath id="Emblem">
      <path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
    </clipPath>
    
    <path id="Emblem2"
          d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
             c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z
             M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
             c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
             l3.4,0.5V240z"/>
  </defs>
</svg>

<!-- Will need one of these SVGs for every image you want to display -->
<svg width="300" height="400" class="clip-svg">
  <g clip-path="url(#Emblem)">
    <image width="300" height="400" preserveAspectRatio="xMidYMid slice"
           xlink:href="https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"/>
    <use class="emblem2-ref" xlink:href="#Emblem2"/>
  </g>
</svg>


<br/>
Image: <a href="https://www.pexels.com/photo/woman-wearing-white-top-holding-smartphone-and-tablet-864994/">https://www.pexels.com/...d-tablet-864994/</a>

Paul LeBeau 29.05.2018

CSS svg hover анимация/переход

Ответы (2)

Похожие вопросы