将带有 div 的 SVG 居中放在该 div 的悬停上答案

【问题标题】：Center a SVG with div on hover of that div将带有 div 的 SVG 居中放在该 div 的悬停上
【发布时间】：2017-03-18 07:19:04
【问题描述】：

基本上，

我有一个渐变条，当 USP 悬停在条下方时，渐变会移动到带有三角形的 USP 上方。现在我想弄清楚如何在悬停时让 SVG 的中心在 USP 内部居中，以使渐变看起来也有一个三角形。下面是一个有点硬的截图和codepen。

http://codepen.io/nsmed/pen/MpOLpp?editors=1100

    <section class="small-business-split-header-block">
  <div class="wrapper">
      <h1 class="small-business-header">Your calls<br />answered brilliantly</h1>
      <p class="small-business-sub-header">Our small business services ensure you capture every opportunity and make your business look bigger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet semper ante. Ut vel odio.</p>
  </div><!--wrapper-->

    <div class="usp-bar">
        <p class="usp-one active">Telephone Answering</p>

        <span><img src="http://svgshare.com/i/y4.svg" /></span>
    </div><!--usp-bar-->
    </section>

    <div class="usp-list cf">
    <div class="usp active">
        <a href="#">
            <p>Need your own<br /><strong>dedicated PA?</strong></p>
        </a>
    </div><!--usp-->

    <div class="usp">
        <a href="#">
            <p>Looking for<br />an auto attendent?</p>
        </a>
    </div><!--usp-->


    <div class="usp">
        <a href="#">
            <p>Missing calls<br />on your mobile?</p>
        </a>
    </div><!--usp-->


    <div class="usp">
        <a href="#">
            <p>Looking for a<br />business number?</p>
        </a>
    </div><!--usp-->

</div><!--usp-list-->

【问题讨论】：

换句话说，您试图使三角形与“电话接听” div 的渐变相匹配？这样它们看起来就像是相同的形状？
是的，这是一种更好的解释方式
你解决了吗？

标签： javascript jquery html css svg

【解决方案1】：

在这里试试这个，点击物品可以看到喙在移动。它不是生产就绪代码，但您可以从这里获取它:)

标记

<div class="bar">

  <div class="bar-background">
    <div class="bar-slider"></div>
  </div>
</div>
<ul class="menu">
  <li class="menu-items">Item 1</li>
  <li class="menu-items">Item 2</li>
  <li class="menu-items">Item 3</li>
  <li class="menu-items">Item 4</li>
</ul>

SCSS

$bar-height: 6rem;
$bar-slider-height: 2rem;
$bar-slider-background: #ffffff;
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  padding: 0;
  margin: 0;
}

.bar {
  position: relative;
}

.bar-background {
  background: -webkit-linear-gradient(
      left, 
      rgba(0, 175, 169, 1) 30%, 
      rgba(1, 180, 172, 0.15) 60%);
  height: $bar-height;
  overflow: hidden;
  width: 100%;
}

.bar-slider {
  height: $bar-slider-height;
  margin-top: $bar-height - $bar-slider-height;
  display: flex;
  width: 200vw;
  transition: transform 1s linear;
  &:before,
  &:after {
    content: "";
    width: 100vw;
    display: block;
    background: $bar-slider-background;
    height: $bar-slider-height;
  }
  &:before {
    transform: skew(45deg) translateX(-50%);
  }
  &:after {
    transform: skew(-45deg)  translateX(-50%);
  }
}

.menu {
    height: 2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.menu-items {
  list-style: none;
}

var slider = $('.bar-slider'),
  sliderCenter = parseInt(slider.width() / 4, 10); // taking 1/4 here because our slider is twice the width of viewPort

$('.menu-items').on('click', function() {
  var activeClassName = 'is-active';
  $(this)
    .addClass(activeClassName)
    .siblings()
    .removeClass(activeClassName);

  var activeItem = $('.' + activeClassName),
    activeItemPositonFromLeft = activeItem.position().left,
    activeItemCenter = parseInt(activeItem.width() / 2, 10),
    newPos = parseInt(activeItemPositonFromLeft - sliderCenter + activeItemCenter, 10),
    translateX = 'translateX(' + newPos + 'px)';
  slider.css({
    transform: translateX
  });
});

http://codepen.io/robiosahan/pen/gmopRJ

【讨论】：