Svg V形臂

Question

这对我来说很难描述，所以请耐心等待。

我要求为网站建立一个“upvote”控件。 “upvotes”的数量可在系统设置中配置。控件应该看起来像绿色的V形指向上方。如果有三个，如果你点击顶部，你实际上已经“投票”，权重为3.如果你随后点击底部的雪佛龙，你实际上是将你的投票权重改为1.还有鼠标悬停，点击，与投票V形相关的活跃造型。

线框显示这些V形非常紧密堆叠，在我的3票例中，底部V形的上部高于顶部V形的底部点。

这种情况使我无法使用图像，因为重叠将是一种难以管理的体验，我认为。所以我希望有一种相对简单的方法可以使用CSS和/或JavaScript“构建”这些形状，并将它们视为标准div。

我遇到了麻烦吗？或者是否有一种相对简单的方法可以兼容所有现代浏览器（IE 9 +）？

Answer 1

这将为您提供前端启动。至少是从哪里开始的方向。通过一些JS和后端编程，您将能够使这些字体真棒图标注册为1,2或3的值

HTML

<div class="container">
    <div class="rating">
        <div class="upvote">
            <div><i class="fa fa-chevron-up"></i></div>
            <div><i class="fa fa-chevron-up"></i></div>
            <div><i class="fa fa-chevron-up"></i></div>
        </div>
        <span class="divider"></span>
        <div class="downvote">
            <div><i class="fa fa-chevron-down"></i></div>
            <div><i class="fa fa-chevron-down"></i></div>
            <div><i class="fa fa-chevron-down"></i></div>
        </div>
    </div>
</div>

CSS

.rating{
    margin-top:30px;
}
.rating > div {
  position: relative;
  width: 1.1em;
  margin:-10px auto;
}

.rating .fa{
    font-size:32px;
    line-height: 0;
}
.rating .divider{
    width:40px;
    display:block;
    border-bottom: 3px solid black;
    height:5px;
    text-align:center;
    margin: 15px 458px 25px;

}
.upvote > div .fa-chevron-up:hover,
.upvote > div:hover ~ div .fa-chevron-up {
   color: green;
}

.downvote > div .fa-chevron-down:hover,
.downvote > div:hover ~ div .fa-chevron-down {
   color: red;
}

P.S。您可能已经知道，CSS不会遍历，因此您需要一些帮助，将悬停属性分配给downvote部分。如果明天没有其他人有这个答案，我会为你建造它。

这里是DEMO

Answer 2

Svg V形臂

如果使用 svg 创建此形状，则每个形状都有自己的边框。因此，悬停状态只会在其形状内触发对于点击，我为每个形状添加了javascript和id。

＆＃13;

var down1 = document.getElementById("down1");
var down2 = document.getElementById("down2");
var down3 = document.getElementById("down3");
var up1 = document.getElementById("up1");
var up2 = document.getElementById("up2");
var up3 = document.getElementById("up3");

function pling() {
  alert(this.id);
}

down1.addEventListener("click", pling);
down2.addEventListener("click", pling);
down3.addEventListener("click", pling);
up1.addEventListener("click", pling);
up2.addEventListener("click", pling);
up3.addEventListener("click", pling);

＆＃13;

#center {
  fill: #222;
  stroke: #bbb;
  stroke-width: 0.5;
}
.up {
  fill: #5a5;
  cursor: pointer;
}
.up:hover {
  fill: #262;
  stroke: green;
  stroke-width: 0.1;
}
.down {
  fill: #322;
  cursor: pointer;
}
.down:hover {
  fill: #a55;
  stroke: red;
  stroke-width: 0.1;
}

＆＃13;

<svg viewBox="0 0 50 100" width="100px" xmlns="http://www.w3.org/2000/svg">
  <polygon id="center" points="5,50 25,30 45,50, 25,70 5,50" />
  <polygon id="down3" class="down" points="5,70 25,90 45,70 45,80 25,100 5,80" />
  <polygon id="down2" class="down" points="45,60 25,80 5,60 5,70 25,90 45,70" />
  <polygon id="down1" class="down" points="5,50 25,70 45,50 45,60 25,80 5,60" />
  <polygon id="up1" class="up" points="5,50 25,30 45,50 45,40 25,20 5,40" />
  <polygon id="up2" class="up" points="5,40 25,20 45,40 45,30 25,10 5,30" />
  <polygon id="up3" class="up" points="5,30 25,10 45,30 45,20 25,0 5,20" />
</svg>

＆＃13;

使用CSS和/或JavaScript重叠可堆叠，可点击的形状？

2 个答案:

Svg V形臂