CSS SVG наведите анимацию / переход - PullRequest
Новая
       14

CSS SVG наведите анимацию / переход

0 голосов
/ 28 мая 2018

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

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

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>

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

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Я не вижу способа добиться того, что вы хотите, используя пути к клипам в элементе 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>
0 голосов
/ 28 мая 2018

Я бы рассмотрел два слоя каждый, используя 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>
...