Question

基本上，

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

https://github.com/angular/material2/pull/2790

Preserve Aspect Ratio

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

Answer 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;
}

JS

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

将div放在一个SVG的中心

1 个答案: